如何自定义有序列表中的数字？

Question

如何自定义有序列表中的数字？

如何在有序列表中左对齐数字？

1.  an item

// skip some items for brevity 

9.  another item

10. notice the 1 is under the 9, and the item contents also line up

更改有序列表中的数字后面的字符？

1) an item

还有一个CSS解决方案，可以从数字更改为字母/罗马列表，而不是使用ol元素上的type属性。

我最感兴趣的是适用于Firefox 3的答案。

Answer 1

这是我在Firefox 3，Opera和Google Chrome中使用的解决方案。该列表仍显示在IE7中（但没有关闭括号和左对齐数字）：ol&nbsp;{ &nbsp;&nbsp;counter-reset:&nbsp;item; &nbsp;&nbsp;margin-left:&nbsp;0; &nbsp;&nbsp;padding-left:&nbsp;0;}li&nbsp;{ &nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;margin-bottom:&nbsp;.5em; &nbsp;&nbsp;margin-left:&nbsp;2em;}li::before&nbsp;{ &nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;content:&nbsp;counter(item)&nbsp;")&nbsp;"; &nbsp;&nbsp;counter-increment:&nbsp;item; &nbsp;&nbsp;width:&nbsp;2em; &nbsp;&nbsp;margin-left:&nbsp;-2em;}<ol> &nbsp;&nbsp;<li>One</li> &nbsp;&nbsp;<li>Two</li> &nbsp;&nbsp;<li>Three</li> &nbsp;&nbsp;<li>Four</li> &nbsp;&nbsp;<li>Five</li> &nbsp;&nbsp;<li>Six</li> &nbsp;&nbsp;<li>Seven</li> &nbsp;&nbsp;<li>Eight</li> &nbsp;&nbsp;<li>Nine<br>Items</li> &nbsp;&nbsp;<li>Ten<br>Items</li></ol>编辑：由strager包含多行修复还有一个CSS解决方案，可以从数字更改为字母/罗马列表，而不是使用ol元素上的type属性。请参阅list-style-type&nbsp;CSS属性。或者在使用计数器时，第二个参数接受list-style-type值。例如，以下将使用上罗马：li::before&nbsp;{ &nbsp;&nbsp;content:&nbsp;counter(item,&nbsp;upper-roman)&nbsp;")&nbsp;"; &nbsp;&nbsp;counter-increment:&nbsp;item;/*&nbsp;...&nbsp;*/

Answer 2

样式列表的CSS在这里，但基本上是：li&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;list-style-type:&nbsp;decimal; &nbsp;&nbsp;&nbsp;&nbsp;list-style-position:&nbsp;inside;}但是，你可能只能通过钻研的东西，如布局的内部结构来实现后是具体布局这个（请注意，我还没有真正尝试过）：ol&nbsp;{&nbsp;counter-reset:&nbsp;item&nbsp;}li&nbsp;{&nbsp;display:&nbsp;block&nbsp;}li:before&nbsp;{&nbsp;content:&nbsp;counter(item)&nbsp;")&nbsp;";&nbsp;counter-increment:&nbsp;item&nbsp;}

Answer 3

您还可以在HTML中指定自己的数字 - 例如，如果数字由数据库提供：<ol> &nbsp;&nbsp;<li&nbsp;seq="1">Item&nbsp;one</li> &nbsp;&nbsp;<li&nbsp;seq="20">Item&nbsp;twenty</li> &nbsp;&nbsp;<li&nbsp;seq="300">Item&nbsp;three&nbsp;hundred</li></ol>seq使用类似于其他答案中给出的方法使该属性可见。但content: counter(foo)我们不使用，而是使用content: attr(seq)：ol&nbsp;{ &nbsp;&nbsp;list-style:&nbsp;none;}ol&nbsp;>&nbsp;li:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;attr(seq)&nbsp;".&nbsp;";}CodePen中的演示具有更多样式