如何左对齐有序列表中的数字？
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>编辑：包含由 strager 进行的多行修复
还有一个 CSS 解决方案可以从数字更改为字母/罗马列表，而不是使用 ol 元素上的 type 属性。
请参阅list-style-type CSS 属性。或者当使用计数器时，第二个参数接受一个列表样式类型的值。例如以下将使用大写罗马：
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
您还可以在 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)。
从其他答案中偷了很多，但这对我来说在 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>我建议使用 :before 属性，看看你能用它实现什么。这将意味着您的代码确实仅限于漂亮的新浏览器，并且排除了仍在使用垃圾旧浏览器的市场（令人讨厌的大）部分，
像下面这样的东西，它强制对项目进行固定。是的，我知道必须自己选择宽度不太优雅，但是使用 CSS 进行布局就像卧底警察一样：无论你的动机多么好，它总是会变得混乱。
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
但是您将不得不进行实验以找到确切的解决方案。
如果将前导零添加到数字中，则数字排列得更好，方法是将list-style-type设置为：
ol { list-style-type: decimal-leading-zero; }
借用并改进了马库斯唐宁的答案。在 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. */
}
有一个Type 属性允许您更改编号样式，但是，您不能更改数字/字母后的句号。
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>
文档说关于list-style-position: outside
CSS1 没有指定标记框的精确位置，出于兼容性的原因，CSS2 仍然同样模棱两可。要更精确地控制标记框，请使用标记。
再往上一页是关于标记的东西。
一个例子是：
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
不...只需使用 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;
}
快速和肮脏的替代解决方案。您可以将制表符与预先格式化的文本一起使用。这是一种可能性：
<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>
我将在这里给出我通常不喜欢阅读的那种答案，但我认为，由于还有其他答案告诉你如何实现你想要的，重新考虑你想要实现的是否真的是很好的一个好主意。
首先，您应该考虑以非标准方式显示项目是否是一个好主意，并且分隔符字符与提供的不同。
我不知道原因，但让我们假设你有充分的理由。
这里提出的实现方式包括向您的标记添加内容，主要是通过 CSS :before 伪类。该内容实际上是在修改您的 DOM 结构，将这些项目添加到其中。
当您使用标准的“ol”计数时，您将拥有一个呈现的内容，其中“li”文本是可选的，但它前面的数字是不可选的。也就是说，标准的编号系统看起来更像是“装饰”而不是真实的内容。如果您使用例如那些“:before”方法为数字添加内容，则该内容将是可选的，并且由于此，执行不希望的vopy/paste问题，或屏幕阅读器的可访问性问题，将阅读此“新”内容此外到标准计数系统。
也许另一种方法是使用图像来设置数字的样式，尽管这种替代方法会带来自己的问题（禁用图像时数字不显示，数字的文本大小不变，...）。
无论如何，这个答案的原因不仅仅是提出这个“图像”替代方案，而是让人们思考试图改变有序列表的标准计数系统的后果。
此代码使编号样式与 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>
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>
我有它。尝试以下操作：
<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这是一个非常新的属性。
从概念的角度来看，其他答案更好。但是，您可以用适当数量的 ' ' 填充数字 让他们排队。
*注意：我一开始并没有意识到正在使用编号列表。我认为该列表是明确生成的。