<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
我在 HTML 文件中使用 ol>li，为其添加样式以使用分层编号，如 1、1.1、1.2、1.2.1 等。它有时工作得很好，但有时编号变得困惑。它不是从下一个数字开始，而是继续相同的层次结构。请参阅所附图片，instead of using number 3, the numbering continues as 2.6 and then uses 2.6.1 and so on
这是我的 CSS -
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0
}
ol>li {
display: table;
counter-increment: item;
margin-bottom: .6em
}
ol>li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: .3em;
font-size: 14px;
}
li ol>li {
margin: 0
}
li ol>li:before {
content: counters(item, ".") " "
}
li ol>li:before {
content: counters(item, ".") " ";
font-size: small
}
<ol>
<li>List Item 1
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
<li>List Item 2
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
<li>List Item 3
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
<li>List Item 4
<ol>
<li>Indented List Item 1</li>
<li>Indented List Item 2</li>
<li>Indented List Item 3</li>
</ol>
</li>
</ol>
最佳答案
这里是干净的代码
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</li>
<ol>
<li>three.two.one</li>
<li>three.two.two</li>
</ol>
</ol>
</li>
<li>
four
<ol>
<li>Four.one</li>
<li>Four.two</li>
</ol>
</li>
</ol>
关于html - ol>li 编号变得困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50678354/