Question

我有以下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中实现这一点吗？

Answer 1

我认为您必须使用没有边框的表来解决它。将第一个tds对齐到右侧，将第二个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>

带有自定义文本的HTML有序列表

1 个答案: