这个问题在这里已有答案:
我用子项格式化了有序列表。另一个<ol>
在<div>
内,数字是错误的;为什么?
OL {
counter-reset: item;
padding-left: 10px;
}
LI {
display: list-item
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item
}
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
</ol>
</li>
</ol>
<hr />
<div>
<ol>
<li>one
<ol>
<li>one.one</li>
</ol>
</li>
</ol>
</div>
你可以使用单独的div标签。检查此片段
OL {
counter-reset: item;
padding-left: 10px;
}
LI {
display: list-item
}
LI:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div>
<ol>
<li>one</li>
<li>two
<ol>
<li>two.one</li>
</ol>
</li>
</ol>
</div>
<hr />
<div>
<ol>
<li>one
<ol>
<li>one.one</li>
</ol>
</li>
</ol>
</div>
你可以使用单独的div标签
ol {
counter-reset: item
}
li {
display: block
}
li:before {
content: counters(item, ".") " ";
counter-increment: item
}
<div>
<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>
<div>