可以用css命令列表产生看起来像1.1,1.2,1.3（而不是只有1,2,3）的结果吗？
可以用css命令列表产生看起来像1.1,1.2,1.3（而不是只有1,2,3）的结果吗？ 到目前为止，使用list-style-type：decimal只产生了1,2,3 …
感谢您的帮助
你可以使用计数器来做到这一点：
以下样式表编号将列表项目嵌套为“1”，“1.1”，“1.1.1”等
OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, ".") " "; counter-increment: item }
例
ol { counter-reset: item } li{ display: block } li:before { content: counters(item, ".") " "; counter-increment: item }
<ol> <li>li element <ol> <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> </ol> </li> <li>li element</li> <li>li element <ol> <li>sub li element</li> <li>sub li element</li> <li>sub li element</li> </ol> </li> </ol>
没有任何解决scheme在这个页面上工作正确和普遍的所有级别和长（包装）的段落。 由于可变尺寸的标记（1.，1.2，1.10，1.10.5，…），实现一致的缩进非常棘手; 它不能只是“伪造”，即使对于每个可能的缩进级别都有预先计算的边距/填充。
我终于想出了一个实际工作的解决scheme，不需要任何JavaScript。
它在Firefox 32，Chromium 37，IE 9和Android Browser上testing。 在IE 7和以前不起作用。
CSS：
ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; } ol > li { display: table; counter-increment: item; margin-bottom: 0.6em; } ol > li:before { content: counters(item, ".") ". "; display: table-cell; padding-right: 0.6em; } li ol > li { margin: 0; } li ol > li:before { content: counters(item, ".") " "; }
例： 
尝试一下jsFiddle ，把它放在Gist上 。
select的答案是一个很好的开始，但它本质上强制list-style-position: inside; 在列表项目上造型，使得包装文本难以阅读。 下面是一个简单的解决方法，它还可以控制数字和文本之间的边距，并根据默认行为对数字进行右alignment。
ol { counter-reset: item; } ol li { display: block; position: relative; } ol li:before { content: counters(item, ".")"."; counter-increment: item; position: absolute; margin-right: 100%; right: 10px; /* space between number and text */ }
JSFiddle： http : //jsfiddle.net/3J4Bu/
注意：使用CSS counter s在现代浏览器中创build嵌套编号。 看到接受的答案。 以下仅为历史利益。
如果浏览器支持content和counter ，
.foo { counter-reset: foo; } .foo li { list-style-type: none; } .foo li::before { counter-increment: foo; content: "1." counter(foo) " "; }
<ol class="foo"> <li>uno</li> <li>dos</li> <li>tres</li> <li>cuatro</li> </ol>
这里发布的解决scheme对我来说效果不好，所以我做了这个问题的混合，以及下面的问题： 是否可以在HTML中创build多级有序列表？
/* Numbered lists like 1, 1.1, 2.2.1... */ ol li {display:block;} /* hide original list counter */ ol > li:first-child {counter-reset: item;} /* reset counter */ ol > li {counter-increment: item; position: relative;} /* increment counter */ ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */
结果：
注意：截图，如果你想看到源代码或从这个post是什么： http : //estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="author" content="Sandro Alvares - KingRider"> </head> <body> <style type="text/css"> li.title { font-size: 20px; font-weight: lighter; padding: 15px; counter-increment: ordem; } .foo { counter-reset: foo; padding-left: 15px; } .foo li { list-style-type: none; } .foo li:before { counter-increment: foo; content: counter(ordem) "." counter(foo) " "; } </style> <ol> <li class="title">TITLE ONE</li> <ol class="foo"> <li>text 1 one</li> <li>text 1 two</li> <li>text 1 three</li> <li>text 1 four</li> </ol> <li class="title">TITLE TWO</li> <ol class="foo"> <li>text 2 one</li> <li>text 2 two</li> <li>text 2 three</li> <li>text 2 four</li> </ol> <li class="title">TITLE THREE</li> <ol class="foo"> <li>text 3 one</li> <li>text 3 two</li> <li>text 3 three</li> <li>text 3 four</li> </ol> </ol> </body> </html>
结果： http ： //i.stack.imgur.com/78bN8.jpg
当有两个列表时，我遇到了一些问题，第二个是在DIV里面。第二个列表应该从1开始
<ol> <li>lorem</li> <li>lorem ipsum</li> </ol> <div> <ol> <li>lorem (should be 1.)</li> <li>lorem ipsum ( should be 2.)</li> </ol> </div>
http://jsfiddle.net/3J4Bu/364/
编辑：我解决了这个问题http://jsfiddle.net/hy5f6161/
我需要添加到12中发布的解决scheme，因为我正在使用一个有序列表和无序列表组件的混合列表。 内容：没有closures引用似乎是一个奇怪的事情，加我知道，但它的作品…
ol ul li:before { content: no-close-quote; counter-increment: none; display: list-item; margin-right: 100%; position: absolute; right: 10px; }
以下为我工作：
ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; } ol > li { display: table; counter-increment: item; margin-bottom: 0.6em; } ol > li:before { content: counters(item, ".") ") "; display: table-cell; padding-right: 0.6em; } li ol > li { margin: 0; } li ol > li:before { content: counters(item, ".") ") "; }
看看： http : //jsfiddle.net/rLebz84u/2/
这是正确的代码，如果你想第一个孩子李调整其他CSS。
<style> li.title { font-size: 20px; counter-increment: ordem; color:#0080B0; } .my_ol_class { counter-reset: my_ol_class; padding-left: 30px !important; } .my_ol_class li { display: block; position: relative; } .my_ol_class li:before { counter-increment: my_ol_class; content: counter(ordem) "." counter(my_ol_class) " "; position: absolute; margin-right: 100%; right: 10px; /* space between number and text */ } li.title ol li{ font-size: 15px; color:#5E5E5E; } </style>
在html文件中。
<ol> <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p> <ol class="my_ol_class"> <li> <p> my text 1. </p> </li> <li> <p> my text 2. </p> </li> </ol> </li> </ol>
