标记是一个嵌套列表

Question

我想知道是否可以制作标记来创建一个计数器。

我可以在这里看到我能够实现的目标：http://jsfiddle.net/Jeen/w6V74/1/

ol { 
  counter-reset: level-1; 
  list-style: none; 
  padding-left: 0;
} 
ol li:before { 
  counter-increment: level-1; 
  content: counter(level-1) '. ';
} 


ol ol { 
  counter-reset: level-2; 
  padding-left: 15px;
}
ol ol li:before { 
  counter-increment: level-2; 
  content: counter(level-1) '.' counter(level-2) '. ';
}


ol ol ol { 
  counter-reset: level-3; 
  padding-left: 30px;
} 
ol ol ol li:before { 
  counter-increment: level-3; 
  content: counter(level-1) '.' counter(level-2) '.' counter(level-3) '. '; 
} 

最后，我想得到第二张图片中显示的内容

Answer 1

这是设计缩进样式的一种方法。

通过添加以下规则来修改CSS：

ol > li {
    padding-left: 1.0em;
    position: relative;
}
ol > ol > li {
    padding-left: 2.0em;
    position: relative;
}
ol > ol > ol > li {
    padding-left: 3.0em;
    position: relative;
}
ol li:before { 
    counter-increment: level-1; 
    content: counter(level-1) '. ';
    position: absolute;
    left: 0;
} 

使用ol li:before将生成的内容（position: absolute）从常规流中取出。

诀窍是在左侧添加一些填充，并使用合适的长度来容纳计数器标签。

对于每个列表项（ol>li，ol>ol>li，ol>ol>ol>li），将padding-left设置为1.0em，2.0em，{{1分别（或一些类似的值）并使用3.0em来允许生成的内容元素相对于适当的position: relative父元素定位。

请参阅小提琴：http://jsfiddle.net/audetwebdesign/m2vZd/

Answer 2

您可能需要查看此页面并更改嵌套<ol>的方式：
Proper way to make HTML nested list?

正确嵌套列表后，在下面添加css：

ol {
    display: table;
}
ol > li {
    display: table-row;
}
ol > li::before {
    display: table-cell;
} 

DEMO： http://jsfiddle.net/naokiota/95xha/

希望这有帮助。