Answers:
这是我在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属性。
请参阅list-style-type CSS属性。或者，在使用计数器时，第二个参数接受列表样式类型的值。例如，以下将使用大写罗马字：
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}。
您还可以在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)。
value="4A"，因为它将无法工作。此外，value属性可以与该type属性一起使用，但是value仍然必须是数字（因为它在有序集合中起作用）。
reversed属性仅是html5，使用value的li）。seq我没有使用您设置的value，而是使用了它，attr(value)而不是使用它attr(seq)
从其他答案中偷了很多，但这对我来说在FF3中有效。它具有upper-roman，一致的压痕，右括号。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
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;
}
-->
</style>
</head>
<body>
<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>
</body>
</html>我建议您使用：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. */
}有一个“ 类型”属性，它允许您更改编号样式，但是，不能在数字/字母后更改句号。
<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;
}我有 请尝试以下操作：
<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是一个非常新的属性。
快速而肮脏的替代解决方案。您可以将制表符与预格式化的文本一起使用。这是一种可能性：
<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>