:before
伪元素样式自定义排序列表(不可能使用AFAIK任意形状)。>>0
时也带有边框)与项目编号(指定为l
)之间的间距以及编号与项目(指定为m
)之间的间距也必须是可调的。下面没有定位的解决方案满足前三个要求。
ol {
counter-reset: section;
}
ol li:before {
content: "";
display: inline-block;
counter-increment: section;
content: counters(section, ".") " ";
margin-left: 4px;
margin-right: 10px;
padding: 4px 6px;
background: lightblue;
border: 1px solid skyblue;
border-radius: 4px;
}
ol + li {
margin-top: 6px;
}
但是第四个要求呢?让我们尝试将子元素添加到li
:
<ol>
<li>Alpha</li>
<li>
<ol>
<li>
<p>Lorem ipsum</p>
<p>Duis aute</p>
</li>
</ol>
</li>
</ol>
从概念上讲,:before
伪元素必须占据一列(其下的空格必须为空,直到下一个li
)。目前,我只知道一种解决方案:定位。
ol {
counter-reset: section;
}
ol li {
position: relative;
}
ol li:before {
position: absolute;
left: 0;
counter-increment: section;
content: counters(section, ".") " ";
display: inline-block;
padding: 4px 6px;
background: lightblue;
border: 1px solid skyblue;
border-radius: 4px;
}
ol li + li {
margin-top: 12px;
}
ol li > li {
padding-left: 30px;
}
ol li > li > ol > li {
padding-left: 44px;
}
除了丑陋,此解决方案仅达到第一个和第四个目标:
l
和m
:我们只能控制总间距l + m + o
。l + m + o
仅对于初始数字计数才是实际的。对于远距目标,需要垂直间距调整,但是不太难。
您能否提出一些替代解决方案? CSS的灵活性到此结束吗?
Targets在允许伪元素样式设置之前,将有序列表按::自定义(不可能是AFAIK任意形状)。容器内容边缘之间的间距(即使在左侧填充为...时也带有边框)
这里是使用CSS网格的想法,在这里我将对初始代码进行一些调整: