标记是嵌套列表。

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

您可能需要检查此页面并更改嵌套<ol>的方式。

Proper way to make HTML nested list?

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

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

演示： http://jsfiddle.net/naokiota/95xha/

希望这能有所帮助。

Answer 2

这里有一种方式来设计凹痕。

通过添加以下规则来修改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、3.0em (或一些类似的值)，并使用position: relative允许相对于适当的li父元素定位生成的内容元素。

见小提琴：http://jsfiddle.net/audetwebdesign/m2vZd/