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

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

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

129662 次浏览
小开

样式列表的 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 }
小开

有 类型属性允许你改变编号风格，但是，你不能改变数字/字母后的句号。

<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
小开

我建议使用: before 属性，看看可以用它实现什么。这将意味着你的代码真的仅限于漂亮的新浏览器，并且排除了市场上仍然使用垃圾旧浏览器的(令人恼火的大)部分,

Something like the following, which forces a fixed with on the items. Yes, I know it's less elegant to have to choose the width yourself, but using CSS for your layout is like undercover police work: however good your motives, it always gets messy.

li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}

但是你必须通过实验来找到确切的解决方案。

小开

如果将前导零加到数字上，通过将 列表样式类型设置为:

ol { list-style-type: decimal-leading-zero; }
小开
最佳答案

这是我在 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 属性。

Refer to 列表样式类型 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;
/* ... */
小开

医生说是关于 list-style-position: outside的

CSS1没有具体说明标记盒的确切位置，出于兼容原因，CSS2也同样含糊不清。为了更精确地控制标记框，请使用标记。

再往上是关于记号笔的内容。

一个例子是:

       LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
小开

我知道了，试试以下方法:

<html>
<head>
<style type='text/css'>


ol { counter-reset: item; }


li { display: block; }


li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }


</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>

问题在于，这个 当然不能在较老或兼容性较差的浏览器上工作: display: inline-block是一个非常新的属性。

小开

从其他答案中偷了很多，但这是在 FF3为我工作。它有 upper-roman，统一缩进，一个封闭的括号。

ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
<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</li>
<li>Ten</li>
</ol>

小开

借鉴和改进了 马库斯 · 唐宁的回答。在 Firefox 3和 Opera 9中测试和工作。也支持多行。

ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}


li {
display: block;
margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}


li:before {
content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em;         /* See li comments. */
}
小开

快速和脏 替代解决方案。你可以使用表格字符和预先格式化的文本。这里有一个可能性:

<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>

以及你的 html:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

请注意，li标记和文本开头之间的空格是一个表格字符(在记事本中按 Tab 键时得到的)。

如果你需要支持旧的浏览器，你可以这样做:

<style type="text/css">
ol {
list-style-position: inside;
}
</style>


<ol>
<li><pre>   </pre>an item</li>
<li><pre>   </pre>another item</li>
...
</ol>
小开

不... 只要用 DL:

dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}
小开

从概念的角度来看，其他答案更好。但是，您可以只用适当的数字‘ & ensp;’左填充这些数字，使它们排成一行。

* 注意: 起初我并没有意识到使用了编号列表。我以为列表是明确生成的。

小开

我会在这里给出我通常不喜欢阅读的答案，但我认为，由于有其他的答案告诉你如何实现你想要的，这可能是很好的反思，如果你正在努力实现真的是一个好主意。

First, you should think if it is a good idea to show the items in a non-standard way, with a separator charater diferent than the provided.

我不知道为什么，但我们假设你有很好的理由。

这里提出的实现方法包括向标记中添加内容，主要是通过 CSS: before 伪类实现。这个内容实际上是在修改 DOM 结构，向其中添加这些项。

当您使用标准的“ ol”编号时，您将拥有一个呈现的内容，其中“ li”文本是可选的，但是它之前的数字是不可选的。也就是说，标准编号系统似乎更多的是“装饰”，而不是真正的内容。如果你使用例如“ : before”方法为数字添加内容，这些内容将是可选的，并且由于这个原因，执行不希望的 vcopy/粘贴问题，或者屏幕阅读器读取这些“新”内容的可访问性问题，除了标准的编号系统。

也许另一种方法是使用图像来设置数字的样式，尽管这种方法会带来自己的问题(图像禁用时不显示数字，数字的文本大小不变，...)。

无论如何，这个答案的原因不仅仅是为了提出这个“图像”的替代方案，而是为了让人们思考试图改变有序列表的标准编号系统的后果。

小开

你也可以在 HTML 中指定你自己的号码-例如，如果数据库提供了你自己的号码:

ol {
list-style: none;
}


ol>li:before {
content: attr(seq) ". ";
}
<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)。

Demo in CodePen with more styling

小开

此代码使得编号风格与 li 内容的头部相同。

<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>


<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>
小开

HTML5: 使用 value属性(不需要 CSS)

现代浏览器将解释 value属性，并按您的预期显示它。

<ol>
<li value="3">This is item three.</li>
<li value="50">This is item fifty.</li>
<li value="100">This is item one hundred.</li>
</ol>

Also have a look at 关于 MDN 的 <ol>文章, especially the documentation for the start and attribute.

小开

重复问题上的 Vhndaree 发布了一个有趣的实现问题，它比现有的任何答案都更进一步，因为它实现了一个自定义字符 之前递增的数字:


.custom {
list-style-type: none;
}
.custom li {
counter-increment: step-counter;
}
.custom li::before {
content: '(' counter(step-counter) ')';
margin-right: 5px;
}
 



<ol class="custom">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
<li>Tenth</li>
</ol>


提交答案