HTML命令自定义文本列表

-3

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

来源

2017-02-14 HackerCow

@AymDev我的问题是从字面上如何做到这一点我自己，因为我不知道怎么办。请注意，我也必须在项目符号点之间显示文本，并且此文本也需要排列。我不认为这是一项微不足道的任务，我想请求下决心解释他们为什么这样做。 – HackerCow

@AymDev这不符合我的要求（请参阅https://jsfiddle.net/j0shey6f/）。文字未正确对齐 – HackerCow

对不起，但您所说的话没有任何意义。我遇到了一个不平凡的问题，经过大量研究后，决定提出一个问题。我的印象是，这正是Stackoverflow的目的。我非常了解HTML和CSS中的基本和高级技术，但我无法自己找到适合自己需求的解决方案。看来，即使Stackoverflow据说目前没有回答这个问题（请记住，我试图展示的文本是动态的），我认为它甚至可以以这样或那样的方式让社区受益。 – HackerCow

我认为你必须用无边界的表格解决它。将第一个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>

来源

2017-02-14 13:36:07

谢谢，这工作就像一个魅力！我对使用表格解决方案有点犹豫，但只要它能够工作，我就可以很好地使用表格解决方案。尽管如此，我仍然认为没有必要进行3次降价。 – HackerCow

好吧，我没有倒下。是的，我也喜欢避开桌子，但有时他们是我们最好的朋友。 XP –

HTML命令自定义文本列表

回答

相关问题