帶有自定義文本的 HTML 有序列表

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 向右對齊，將第二個向左對齊。 我認為這與您想要的最相似。

就像是：

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>