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

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 的答案。

原文由 grom 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 属性。或者当使用计数器时，第二个参数接受一个列表样式类型的值。例如，以下将使用大写罗马字：

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

原文由 grom 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 }

原文由 Marcus Downing 发布，翻译遵循 CC BY-SA 3.0 许可协议