[英]HTML ordered list with custom text
我有以下 HTML:
<ol>
<li>foo</li>
<li>bar</li>
<li>testing</li>
<li>hello world</li>
</ol>
这当然有效并提供以下输出:
1. foo
2. bar
3. testing
4. hello world
现在我的问题是我有时需要不同的文本而不是数字。 文本应该是完全可定制的,所以 CSS :before
解决方案对我不起作用。
考虑这个例子,电视连续剧集的列表:
12. The Duel
13. Prince Family Paper
14./15. Stress relief
16. Lecture Circuit: Part 1
所以基本上我试图创建一个“假” <ol>
以便数字之后的所有文本正确对齐。 有什么办法可以在 HTML/CSS 中实现这一点吗?
我认为你将不得不用一张没有边界的桌子来解决它。 将第一个 tds 向右对齐,将第二个向左对齐。 我认为这与您想要的最相似。
就像是:
css:
table {
border: none;
}
table tr td:first-child {
text-align: right;
}
html:
<table>
<tr>
<td>12.</td>
<td>The Duel</td>
</tr>
<tr>
<td>13.
<td>Prince Family Paper
</tr>
<tr>
<td>14./15.</td>
<td>Stress relief</td>
</tr>
<tr>
<td>16.</td>
<td>Lecture Circuit: Part 1</td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.