[英]HTML ordered list with custom text
I have the following HTML:我有以下 HTML:
<ol>
<li>foo</li>
<li>bar</li>
<li>testing</li>
<li>hello world</li>
</ol>
This, of course, works and gives the following output:这当然有效并提供以下输出:
1. foo
2. bar
3. testing
4. hello world
Now my problem is that I sometimes need to have different text instead of the numbers.现在我的问题是我有时需要不同的文本而不是数字。 The text should be completely customizable, so CSS
:before
solutions don't work for me.文本应该是完全可定制的,所以 CSS
:before
解决方案对我不起作用。
Consider this example, a listing of TV series episodes:考虑这个例子,电视连续剧集的列表:
12. The Duel
13. Prince Family Paper
14./15. Stress relief
16. Lecture Circuit: Part 1
So essentially I'm trying to create a "fake" <ol>
so that all the text after the numbers is correctly aligned.所以基本上我试图创建一个“假”
<ol>
以便数字之后的所有文本正确对齐。 Is there any way I can achieve this in HTML/CSS?有什么办法可以在 HTML/CSS 中实现这一点吗?
I think that you will have to solve it with a table without borders.我认为你将不得不用一张没有边界的桌子来解决它。 Align the first tds to the right and the second ones to the left.
将第一个 tds 向右对齐,将第二个向左对齐。 Is what I think that would most closely resemble what you want.
我认为这与您想要的最相似。
Something like:就像是:
css: css:
table {
border: none;
}
table tr td:first-child {
text-align: right;
}
html: 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.