如何设置有序列表的第一个和第二个孩子具有相同的缩进? [英] How to set first and second child of ordered list to have the same indentation?
本文介绍了如何设置有序列表的第一个和第二个孩子具有相同的缩进?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要实现的是:
1 text
1.1 text
2 text
2.1 text
2.1.1 text
2.1.2 text
3. text
3.1 text
3.1.1 text
3.1.2 text
3.1.3 text
父级，即 1, 2, 3 不会有任何缩进.同样适用于它的第一个孩子，即 1.1、2.1、3.1，如您在上面的代码中所见.
The parent i.e 1, 2, 3 will not have any indentation. Same goes to its first child i.e 1.1, 2.1, 3.1 as you can see on code above.
我当前的代码:
<style>
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
li:before {
font-weight: bold;
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li li:before {
content: counters(item, ".") " ";
}
<body>
<ol>
<li>
Text
</li>
<li>
Text
<ol>
<li>
text
</li>
</ol>
</li>
<li>Text
<ol>
<li>text</li>
<li>text</li>
</ol>
</li>
<li>text
<ol>
<li>text
</li>
<li>text
</li>
<li>text
<ol>
<li>text
</li>
<li>text
</li>
<li>text
</li>
</ol>
</li>
<li>text
<ol>
<li>text
</li>
<li>text
</li>
<li>text
</li>
</ol>
</li>
<li>text
</li>
</ol>
</li>
</ol>
</body>
结果:输出
如何删除缩进(例如 4.1、4.2、4.3、4.4)并使其与父级缩进相同级别(1,2,3,4)?
How do I remove the indentation (eg. 4.1, 4.2, 4.3, 4.4) and make it same level indent with its parent (1,2,3,4)?
推荐答案
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
li {
counter-increment: item;
margin-bottom: 0.6em;
}
li:before {
font-weight: bold;
content: counters(item, ".") ". ";
padding-right: 0.6em;
}
li li:before {
content: counters(item, ".") " ";
}
body>ol>li>ol ol {
margin-left: 3em;
}<body>
<ol>
<li>
Text
</li>
<li>
Text
<ol>
<li>
text
</li>
</ol>
</li>
<li>Text
<ol>
<li>text</li>
<li>text</li>
</ol>
</li>
<li>text
<ol>
<li>text
</li>
<li>text
</li>
<li>text
<ol>
<li>text
</li>
<li>text
</li>
<li>text
</li>
</ol>
</li>
<li>text
<ol>
<li>text
</li>
<li>text
</li>
<li>text
</li>
</ol>
</li>
<li>text
</li>
</ol>
</li>
</ol>
</body>这篇关于如何设置有序列表的第一个和第二个孩子具有相同的缩进?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
