如何自定义有序列表中的数字？ [英] How can you customize the numbers in an ordered list?

问题描述

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

How can I left-align the numbers in an ordered list?

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

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

Change the character after the number in an ordered list?

1) an item

还有一个CSS解决方案，字母/罗马列表，而不是在ol元素上使用type属性。

Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.

我最感兴趣的是在Firefox 3上工作的答案。

I am mostly interested in answers that work on Firefox 3.

推荐答案

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

This is the solution I have working in Firefox 3, Opera and Google Chrome. The list still displays in IE7 (but without the close bracket and left align numbers):

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>

EDIT：包含strager的多行修复

Included multiple line fix by strager

从数字到字母/罗马列表，而不是在ol元素上使用type属性。

Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.

请参阅 list-style-type CSS属性。或者当使用计数器时，第二个参数接受列表风格类型值。例如下面将使用上罗马：

Refer to list-style-type CSS property. Or when using counters the second argument accepts a list-style-type value. For example the following will use upper roman:

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

这篇关于如何自定义有序列表中的数字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！