Nested Ordered List Numbering Issue
Clash Royale CLAN TAG#URR8PPP
Nested Ordered List Numbering Issue
I'm making a Table of Contents with nested numeric ordered lists. It starts off well, but once I go back a level the numbering gets off. As you can see once it gets to the 4th level not only is the numbering off, but now everything has one extra number, regardless of level.
This is what I end up with:
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
This is the code I'm using:
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"> Item 1</li>
<ol class="toc">
<li class="toc"> Sub Item</li>
<ol class="toc">
<li class="toc"> Level 3 Item</li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
</ol>
<li class="toc"> Level 3 Item</li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
</ol>
<li class="toc"> Level 3 Item</li>
<li class="toc"> Level 3 Item</li>
</ol>
<li class="toc"> Level 2</li>
</ol>
</ol>
</div>
</body>
</html>
Not sure what's going on. I haven't found too many examples that fit my needs.
I appreciate any help!
1 Answer
1
I think the wrong numbering is happening because you should wrap every child <ol> in it's parent <li>. And for better look set list-style-type:none; of the top most parent <ol>.
<ol>
<li>
list-style-type:none;
<ol>
Check it out:
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"> Item 1</li>
<ol class="toc">
<li class="toc"> Sub Item</li>
<li>
<ol class="toc">
<li class="toc"> Level 3 Item</li>
<li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
<li class="toc"> Level 4 Item</li>
</ol>
</li>
<li class="toc"> Level 3 Item</li>
<li>
<ol class="toc">
<li class="toc"> Level 4 Item</li>
</ol>
</li>
<li class="toc"> Level 3 Item</li>
<li class="toc"> Level 3 Item</li>
</ol>
</li>
<li class="toc"> Level 2</li>
</ol>
</ol>
</div>
</body>
</html>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
fantastic answer
– Dharmesh Vekariya
Aug 14 at 5:23