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

小编典典

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

html

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

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上的答案最感兴趣。

阅读 411

2020-05-10

共1个答案

小编典典

这是我在Firefox 3，Opera和Google Chrome中使用的解决方案。该列表仍显示在IE7中（但没有右括号和左对齐数字）：

ol {

  counter-reset: item;

  margin-left: 0;

  padding-left: 0;

}

li {

  display: block;

  margin-bottom: .5em;

  margin-left: 2em;

}

li::before {

  display: inline-block;

  content: counter(item) ") ";

  counter-increment: item;

  width: 2em;

  margin-left: -2em;

}


<ol>

  <li>One</li>

  <li>Two</li>

  <li>Three</li>

  <li>Four</li>

  <li>Five</li>

  <li>Six</li>

  <li>Seven</li>

  <li>Eight</li>

  <li>Nine<br>Items</li>

  <li>Ten<br>Items</li>

</ol>

编辑： 包括由斯特拉格的多行修复

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

请参阅列表样式类型CSS属性。或者，当使用计数器时，第二个参数接受列表样式类型的值。例如，以下将使用大写罗马字：

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

2020-05-10