你如何定制有序列表中的数字？
我如何将数字排列在有序列表中？
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解决scheme，从数字更改为字母/罗马列表，而不是使用OL元素的types属性。
我主要对在Firefox 3上工作的答案感兴趣。
这是我在Firefox 3，Opera和Google Chrome上的解决scheme。 该列表仍显示在IE7中（但没有左括号和左alignment号码）：
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>
我认为这是满足您的要求的答案：
li { list-style-position: inside; margin-bottom: .5em; } li span { float: left; margin-left: 2em; margin-top: -1.25em; }
<ol start="8"> <li><span>Item</span></li> <li><span>Item</span></li> <li><span>Item</span></li> <li><span>Item</span></li> </ol>
样式列表的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 }
从其他答案偷了很多这个，但这是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>
您也可以在HTML中指定自己的数字 – 例如，如果数据由数据库提供：
<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) ：
ol { list-style: none; } ol > li:before { content: attr(seq) ". "; }
在CodePen中进行更多样式的演示
我build议玩：before属性，看看你能用它实现什么。 这将意味着你的代码真的只限于漂亮的新浏览器，并排除仍然使用垃圾旧浏览器的市场（令人讨厌的大部分）
像下面的东西，这强制固定与项目。 是的，我知道自己select宽度并不那么高雅，但是使用CSS来进行布局就像是卧底警察的工作：不pipe你的动机如何，它总是变得杂乱无章。
li:before { content: counter(item) ") "; counter-increment: item; display: marker; width: 2em; }
但是，你将不得不尝试find确切的解决scheme。
如果您通过将列表样式types设置为：将数字前导零添加到数字，则数字会更好：
ol { list-style-type: decimal-leading-zero; }
借用和改进了马库斯·唐宁的答案 。 经过testing并在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; }
我有。 尝试以下操作：
<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是一个非常新的属性。
快速和污垢替代解决scheme。 您可以使用制表符和预先格式化的文本。 这是一个可能性：
<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>
从概念的angular度来看，其他答案更好。 然而，你可以用适当数量的“＆ensp”左键填充数字 使他们排队。
*注意：我一开始并没有意识到正在使用一个编号列表。 我以为清单是明确产生的。
我会在这里给出一些我通常不喜欢阅读的答案，但是我认为，还有其他的答案告诉你如何实现你想要的东西，这可能是很好的重新思考，如果你正在努力实现的是真的一个好主意。
首先，您应该考虑以非标准方式显示项目是否合适，分隔符的字符与所提供的不同。
我不知道原因，但假设你有很好的理由。
这里提到的实现方法包括将内容添加到标记中，主要是通过CSS：在伪类之前。 这个内容实际上是修改你的DOM结构，添加这些项目。
当你使用标准的“ol”数字时，你将得到一个渲染的内容，其中“li”文本是可选的，但是它之前的数字是不可select的。 也就是说，标准的编号系统似乎比实际的内容更“装饰”。 如果您使用例如“：before”方法添加数字内容，则此内容将是可select的，并执行此操作，执行不需要的复杂/粘贴问题或屏幕阅读器的可访问性问题，此外还将读取此“新”内容到标准的计数系统。
也许另一种方法可以是使用图像来设置数字的样式，尽pipe这个select会带来它自己的问题（当图像被禁用时数字不显示，数字的文本大小不变，…）。
无论如何，这个答案的原因不仅仅是提出这个“图像”的select，而是让人们想象在试图改变有序列表的标准计数系统的后果。
此代码使得编号风格与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>
