可以排序列表产生类似于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 { 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>

Answer 2

本页面上没有一个解决方案对所有级别和长(包装)段落都是正确和普遍的。由于标记的可变大小(1.，1.2，1.10，1.10.5，…)，要实现一致的缩进是非常困难的。它不能仅仅是“伪造的”，即使每个可能的缩进级别都有一个预先计算的边距/填充。

我终于想出了一个解决办法实际工作不需要任何JavaScript。

它是在Firefox 32，Chromium37，IE9和Android浏览器上测试的。不工作在IE7和以前的。

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，叉起来要旨.