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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

这是我在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;
/* ... */

以上是 如何定制有序列表中的数字？ 的全部内容， 来源链接： utcz.com/qa/400818.html

回到顶部