我想在ol
内创建包含列表项的嵌套有序列表li
:
1. Lorem ipsum
1.1 Lorem ipsum
10.1.1 Lorem ipsumLorem ipsum
10.1.2 Lorem ipsum
10.1.3 Lorem ipsum
10.2 Lorem ipsum
我尝试了这个scss(在stackoverflow上找到),但遗憾的是我预期10.2
我得到了10.1.4
。
ol {
counter-reset: item;
}
ol>li {
counter-increment: item;
}
ol ol>li {
display: block;
}
ol ol>li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}
ol ol ol>li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}

<ol>
<li>
<h2>Personal information</h2>
<ol>
<li></li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
&#13;
查看问题
答案 0 :(得分:2)
您关闭第二级的<li>
太快了。第三级完成后关闭它。
ol {
counter-reset: item;
}
ol>li {
counter-increment: item;
}
ol ol>li {
display: block;
}
ol ol>li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}
ol ol ol>li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}
&#13;
<ol>
<li>
<h2>Personal information</h2>
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
&#13;
答案 1 :(得分:1)
这就是你需要的。下面是代码。更新ol > li
ol {
counter-reset: item;
}
ol > li {
counter-increment: item;
content: counters(item, ".");
}
ol ol > li {
display: block;
}
ol ol > li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}
ol ol ol > li:before {
content: counters(item, ".") " ";
margin-left: -20px;
}
<ol>
<li>Lorem
<ol>
<li>Lorem ipsum
<ol>
<li>Lorem ipsum dolor
</li>
<li>sit amet, consectetur
</li>
<li>adipiscing elit, sed
</li>
</ol>
</li>
<li>dolor sit</li>
</ol>
</li>
</ol>