Css 带全宽边框和缩进的嵌套列表

我正在努力实现以下结果：

到目前为止，我已经写了以下内容：

a {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    border-top: 1px solid;
    border-bottom: 1px solid;
    padding-left: 1em;
    line-height: 2em;
}
li li {
    margin-left: -1em;
    padding-left: 2em;
    border-bottom: none;
}
li li li {
    margin-left: -2em;
    padding-left: 3em;
    border-bottom: none;
}

演示：

---

然而，我正在寻找一个解决方案，将允许无限的深度。是否有一个干净的解决方案？

没有办法通过嵌套来增加元素的边距/填充

希望这能帮助你：

a {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    border-top: 1px solid;
    border-bottom: 1px solid;
    line-height: 2em;
}
li li {
    border-bottom: none;
}
li li a {
    margin-left: 1em;
}
li li li a {
    margin-left: 2em;
}
li li li li a {
    margin-left: 3em;
}

---

通过对边界使用

位置：绝对

技巧来了解这一点

正文{
保证金：0；
填充：1em；
}
车身>ul{
边框底部：1px纯黑；
溢出：隐藏；
}
a{
文字装饰：无；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
线高：2米；
位置：相对位置；
}
李乌尔{
左：1米；
}
李：之后{
内容：“\00A0”；
位置：绝对位置；
宽度：200%；
左-100%；
排名：0；
边框顶部：1件纯黑；
z指数：-1；
}

您可以通过应用重复的

线性渐变作为顶层
ul
的背景来伪造边框。然后，您只需要为列表项使用一条规则来设置填充

下面是一个例子：


正文{
字体系列：arial；
字体大小：14px；
保证金：0；
}
车身>ul{
背景：线性梯度（0度，3.333%，3.333%）；
背景尺寸：100%30px；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
李{
线高：30px；
填充：0.1em；
}














如果你好奇的话，
\00A0
是unicode的缩写。