Html有序列表1.1、1.2 (嵌套计数器和作用域)不起作用
Html有序列表1.1、1.2 (嵌套计数器和作用域)不起作用
提问于 2012-05-02 07:53:40
我使用嵌套计数器和作用域来创建有序列表：
ol {
counter-reset: item;
padding-left: 10px;
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}<ol>
<li>one</li>
<li>two</li>
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
<li>three</li>
<ol>
<li>three.one</li>
<li>three.two</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
<li>four</li>
</ol>
我预计会有以下结果：
1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
3. three
3.1 three.one
3.2 three.two
3.2.1 three.two.one
3.2.2 three.two.two
4. four相反，这是我看到的错误编号()
1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
2.1 three.one
2.2 three.two
2.2.1 three.two.one
2.2.2 three.two.two
2.3 four我不知道，有没有人看到哪里出了问题？
这是一个JSFiddle：http://jsfiddle.net/qGCUk/2/
回答 9
Stack Overflow用户
回答已采纳
发布于 2012-05-02 07:55:36
取消选中"normalize CSS“- http://jsfiddle.net/qGCUk/3/中使用的CSS重置，默认所有列表边距和填充为0
UPDATE http://jsfiddle.net/qGCUk/4/ -您必须在主<li>中包括子列表
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
<li>two.two</li>
<li>two.three</li>
</ol>
</li>
<li>three
<ol>
<li>three.one</li>
<li>three.two
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</li>
</ol>
</li>
<li>four</li>
</ol>
Stack Overflow用户
发布于 2015-05-19 21:18:27
使用此样式仅更改嵌套列表：
ol {
counter-reset: item;
}
ol > li {
counter-increment: item;
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}Stack Overflow用户
发布于 2012-05-02 08:00:51
看看这个:
您的问题似乎已得到解决。
显示给我的是什么(在Chrome和Mac OS X下)
1. one
2. two
2.1. two.one
2.2. two.two
2.3. two.three
3. three
3.1 three.one
3.2 three.two
3.2.1 three.two.one
3.2.2 three.two.two
4. four我是如何做到的
用代替:
<li>Item 1</li>
<li>Item 2</li>
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>Do :
<li>Item 1</li>
<li>Item 2
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10405945
复制相关文章
相似问题
腾讯云开发者
