HTML和列表对我来说是一个新的层次，我正在尝试在HTML中创建一个带有相关编号的嵌套列表，并在第三级中使用字母编号类型。
body {
padding-left: 100px;
}
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol>li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol>li:before {
content: counters(item, ".",decimal-leading-zero) ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol>li {
margin: 0;
}
li ol>li:before {
content: counters(item, ".",decimal-leading-zero) " ";
}
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
以上是我的代码。结果如下：
01.
01.01
01.02
01.03
02.
03.
04.
04.01
04.02
04.02.01
04.02.02
04.02.03
但我想要的是：
01.
01.01
01.02
01.03
02.
03.
04.
04.01
04.02
a. ←
b. ←
c. ←
04.03
有人知道如何解决这个问题吗？
我已经尝试了数字解决方案并搜索了网络。这就是我得出上述解决方案的方法。但是我找不到第三级的小写字母类型的样式解决方案。
P粉0334291622024-04-01 13:38:08
最简单的方法是将您的第三级列表项更改回列表项，隐藏内容并使用小写字母的列表样式：
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol>li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol>li:before {
content: counters(item, ".", decimal-leading-zero) ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol>li {
margin: 0;
}
li ol>li:before {
content: counters(item, ".", decimal-leading-zero) " ";
}
/* 下面的样式添加，其他内容不变 */
ol ol ol {
list-style-type: lower-alpha;
}
ol ol ol li {
display:list-item;
margin-left: 1em;
}
ol ol ol li:before {
content: none;
}
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
P粉4884647312024-04-01 13:27:34
请检查下面的工作代码：
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol>li {
display: block;
counter-increment: item;
margin-bottom: 0.6em;
padding-left: 15px;
}
ol>li:before {
content: counters(item, ".",decimal-leading-zero) ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol>li {
margin: 0;
}
li ol>li:before {
content: counters(item, ".",decimal-leading-zero) " ";
}
ol>li>ol>li>ol
{
counter-reset: listStyle;
}
ol>li>ol>li>ol li{
margin-left: 1em;
counter-increment: listStyle;
}
ol>li>ol>li>ol li::before {
margin-right: 1em;
content: counter(listStyle, lower-alpha);
}
<html>
<head>
</head>
<body>
</body>
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>