Html 有序列表 1.1、1.2（嵌套计数器和范围）不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10405945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html ordered list 1.1, 1.2 (Nested counters and scope) not working
提问by dirk
I use nested counters and scope to create an ordered list:
我使用嵌套计数器和范围来创建一个有序列表：
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>I expect the following outcome:
我期待以下结果：
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
Instead, this is what I see (wrong numbering):
相反，这是我看到的（错误编号）：
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
I have no clue, does anyone see where it goes wrong?
我不知道，有没有人看到哪里出了问题？
Here is a JSFiddle: http://jsfiddle.net/qGCUk/2/
这是一个 JSFiddle：http: //jsfiddle.net/qGCUk/2/
回答by Zoltan Toth
Uncheck "normalize CSS" - http://jsfiddle.net/qGCUk/3/The CSS reset used in that defaults all list margins and paddings to 0
取消选中“规范化 CSS” - http://jsfiddle.net/qGCUk/3/ 中使用的 CSS 重置默认所有列表边距和填充为 0
UPDATEhttp://jsfiddle.net/qGCUk/4/- you have to include your sub-lists in your main <li>
更新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>回答by Moshe Simantov
Use this style to change only the nested lists:
使用此样式仅更改嵌套列表：
ol {
counter-reset: item;
}
ol > li {
counter-increment: item;
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}
回答by Dr.Kameleon
Check this out :
看一下这个 ：
Your issue seems to have been fixed.
您的问题似乎已得到解决。
What shows up for me (under Chrome and Mac OS X)
什么显示给我（在 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
How I did it
我是怎么做到的
Instead of :
代替 ：
<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>
回答by ChaosFreak
This is a great solution! With a few additional CSS rules you can format it just like an MS Word outline list with a hanging first line indent:
这是一个很好的解决方案！使用一些额外的 CSS 规则，您可以将其格式化，就像带有悬挂首行缩进的 MS Word 大纲列表一样：
OL {
counter-reset: item;
}
LI {
display: block;
}
LI:before {
content: counters(item, ".") ".";
counter-increment: item;
padding-right:10px;
margin-left:-20px;
}
回答by Babatunde Calebs
I encountered similar problem recently. The fix is to set the display property of the li items in the ordered list to list-item, and not display block, and ensure that the display property of ol is not list-item. i.e
我最近遇到了类似的问题。解决方法是将有序列表中li项的显示属性设置为list-item，而不是显示块，并确保ol的显示属性不是list-item。IE
li { display: list-item;}
With this, the html parser sees all li as the list item and assign the appropriate value to it, and sees the ol, as an inline-block or block element based on your settings, and doesn't try to assign any count value to it.
有了这个，html 解析器将所有 li 视为列表项并为其分配适当的值，并将 ol 视为基于您的设置的内联块或块元素，并且不会尝试分配任何计数值它。
回答by saboshi69
Moshe's solution is great but the problem may still exist if you need to put the list inside a div. (read: CSS counter-reset on nested list)
Moshe 的解决方案很棒，但如果您需要将列表放入div. （阅读：嵌套列表上的 CSS 计数器重置）
This style could prevent that issue:
这种风格可以防止这个问题：
ol > li {
counter-increment: item;
}
ol > li:first-child {
counter-reset: item;
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") ". ";
margin-left: -20px;
}<ol>
<li>list not nested in div</li>
</ol>
<hr>
<div>
<ol>
<li>nested in div</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>
</div>You can also set the counter-reset on li:before.
您还可以在 上设置计数器重置li:before。
