gpt4 book ai didi

html - 嵌套有序列表编号问题

转载 作者:太空宇宙 更新时间:2023-11-03 22:24:42 29 4
gpt4 key购买 nike

我正在制作一个包含嵌套数字有序列表的目录。它开始很好,但是一旦我回到一个级别,编号就会消失。正如您所看到的,一旦达到第 4 级,不仅编号消失了,而且现在所有东西都有一个额外的数字,无论级别如何。

这就是我最终得到的:

SECTION 1
1 Item 1
1.1 Sub Item
1.1.1 Level 3 Item
1.1.1.1 Level 4 Item
1.1.1.2 Level 4 Item
1.1.1.3 Level 4 Item
1.1.1.4 Level 4 Item
1.1.1.5 Level 4 Item
1.1.1.6 Level 3 Item
1.1.1.1 Level 4 Item
1.1.1.2 Level 3 Item
1.1.1.3 Level 3 Item
1.1.2 Level 2 Item

这是我正在使用的代码:

    ol.toc {
counter-reset: item;
}

li.toc {
display: block;
}

li.toc:before {
content: counters(item, ".") " ";
counter-increment: item;
}
<!DOCTYPE html>
<html>

<head>
<title>Table of Contents</title>
</head>

<body>
<div>
<h2>SECTION 1</h2>
</div>

<div style="float: clear;">
<ol class="toc">
<li class="toc">&nbsp; Item 1</li>
<ol class="toc">
<li class="toc">&nbsp; Sub Item</li>
<ol class="toc">
<li class="toc">&nbsp; Level 3 Item</li>
<ol class="toc">
<li class="toc">&nbsp; Level 4 Item</li>
<li class="toc">&nbsp; Level 4 Item</li>
<li class="toc">&nbsp; Level 4 Item</li>
<li class="toc">&nbsp; Level 4 Item</li>
<li class="toc">&nbsp; Level 4 Item</li>
</ol>
<li class="toc">&nbsp; Level 3 Item</li>
<ol class="toc">
<li class="toc">&nbsp; Level 4 Item</li>
</ol>
<li class="toc">&nbsp; Level 3 Item</li>
<li class="toc">&nbsp; Level 3 Item</li>
</ol>
<li class="toc">&nbsp; Level 2</li>
</ol>
</ol>
</div>
</body>

</html>

不确定发生了什么。我还没有找到太多符合我需要的示例。

感谢您的帮助!

最佳答案

我认为发生了错误的编号,因为您应该包裹每个 child <ol>在它的 parent <li> .为了更好看设置 list-style-type:none;最顶层的 parent <ol> .

检查一下:

ol.toc {
counter-reset: item;
}

li.toc {
display: block;
}

li.toc:before {
content: counters(item, ".") " ";
counter-increment: item;
}

.outer li {
list-style-type: none;
}
<!DOCTYPE html>
<html>

<head>
<title>Table of Contents</title>
</head>

<body>
<div>
<h2>SECTION 1</h2>
</div>

<div style="float: clear;">
<ol class="toc outer">
<li class="toc">&nbsp; Item 1</li>
<ol class="toc">
<li class="toc">&nbsp; Sub Item</li>
<li>
<ol class="toc">
<li class="toc">&nbsp; Level 3 Item</li>
<li>
<ol class="toc">
<li class="toc">&nbsp; Level 4 Item</li>
<li class="toc">&nbsp; Level 4 Item</li>
<li class="toc">&nbsp; Level 4 Item</li>
<li class="toc">&nbsp; Level 4 Item</li>
<li class="toc">&nbsp; Level 4 Item</li>
</ol>
</li>
<li class="toc">&nbsp; Level 3 Item</li>
<li>
<ol class="toc">
<li class="toc">&nbsp; Level 4 Item</li>
</ol>
</li>
<li class="toc">&nbsp; Level 3 Item</li>
<li class="toc">&nbsp; Level 3 Item</li>
</ol>
</li>
<li class="toc">&nbsp; Level 2</li>
</ol>
</ol>
</div>
</body>

</html>

关于html - 嵌套有序列表编号问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51783078/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com