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

Question

如何自定义有序列表中的数字？如何在有序列表中左对齐数字？1.  an item// skip some items for brevity 9.  another item10. 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 {
  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>

编辑：由strager包含多行修复

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

请参阅list-style-type CSS属性。或者在使用计数器时，第二个参数接受list-style-type值。例如，以下将使用上罗马：

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

Answer 2

样式列表的CSS在这里，但基本上是：

li {
    list-style-type: decimal;
    list-style-position: inside;}

但是，你可能只能通过钻研的东西，如布局的内部结构来实现后是具体布局这个（请注意，我还没有真正尝试过）：

ol { counter-reset: item }li { display: block }li:before { content: counter(item) ") "; counter-increment: item }

Answer 3

您还可以在HTML中指定自己的数字 - 例如，如果数字由数据库提供：

<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li></ol>

seq使用类似于其他答案中给出的方法使该属性可见。但content: counter(foo)我们不使用，而是使用content: attr(seq)：

ol {
  list-style: none;}ol > li:before {
  content: attr(seq) ". ";}

CodePen中的演示具有更多样式