可以排序列表产生类似于1.1、1.2、1.3的结果(而不仅仅是1、2、3、…)用CSS？

Question

可以排序列表产生类似于1.1、1.2、1.3的结果(而不仅仅是1、2、3、…)用CSS？

一个有序的列表能产生类似1.1，1.2，1.3的结果(而不仅仅是1，2，3，.)用CSS？到目前为止，使用list-style-type:decimal只生产1，2，3，而不是1.1，1.2，1.3。

Answer 1

你可以用计数器为此：下面的样式表编号将列表项嵌套为“1”、“1.1”、“1.1.1”等。OL&nbsp;{&nbsp;counter-reset:&nbsp;item&nbsp;}LI&nbsp;{&nbsp;display:&nbsp;block&nbsp;}LI:before&nbsp;{&nbsp;content:&nbsp;counters(item,&nbsp;".")&nbsp;"&nbsp;";&nbsp;counter-increment:&nbsp;item&nbsp;}例ol { counter-reset: item }li{ display: block }li:before { content: counters(item, ".") " "; counter-increment: item }<ol>&nbsp; <li>li element&nbsp; &nbsp; <ol>&nbsp; &nbsp; &nbsp; <li>sub li element</li>&nbsp; &nbsp; &nbsp; <li>sub li element</li>&nbsp; &nbsp; &nbsp; <li>sub li element</li>&nbsp; &nbsp; </ol>&nbsp; </li>&nbsp; <li>li element</li>&nbsp; <li>li element&nbsp; &nbsp; <ol>&nbsp; &nbsp; &nbsp; <li>sub li element</li>&nbsp; &nbsp; &nbsp; <li>sub li element</li>&nbsp; &nbsp; &nbsp; <li>sub li element</li>&nbsp; &nbsp; </ol>&nbsp; </li></ol>

Answer 2

本页面上没有一个解决方案对所有级别和长(包装)段落都是正确和普遍的。由于标记的可变大小(1.，1.2，1.10，1.10.5，…)，要实现一致的缩进是非常困难的。它不能仅仅是“伪造的”，即使每个可能的缩进级别都有一个预先计算的边距/填充。我终于想出了一个解决办法实际工作不需要任何JavaScript。它是在Firefox 32，Chromium37，IE9和Android浏览器上测试的。不工作在IE7和以前的。CSS：ol&nbsp;{ &nbsp;&nbsp;list-style-type:&nbsp;none; &nbsp;&nbsp;counter-reset:&nbsp;item; &nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;padding:&nbsp;0;}ol&nbsp;>&nbsp;li&nbsp;{ &nbsp;&nbsp;display:&nbsp;table; &nbsp;&nbsp;counter-increment:&nbsp;item; &nbsp;&nbsp;margin-bottom:&nbsp;0.6em;}ol&nbsp;>&nbsp;li:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;counters(item,&nbsp;".")&nbsp;".&nbsp;"; &nbsp;&nbsp;display:&nbsp;table-cell; &nbsp;&nbsp;padding-right:&nbsp;0.6em;&nbsp;&nbsp;&nbsp;&nbsp;}li&nbsp;ol&nbsp;>&nbsp;li&nbsp;{ &nbsp;&nbsp;margin:&nbsp;0;}li&nbsp;ol&nbsp;>&nbsp;li:before&nbsp;{ &nbsp;&nbsp;content:&nbsp;counters(item,&nbsp;".")&nbsp;"&nbsp;";}试穿一下JSFiddle，叉起来要旨.