具有全角边框和缩进的嵌套列表

Question

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

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

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;
}

演示：https://jsfiddle.net/9h891a0s/1/

然而，我正在寻找一种能够实现无限深度的解决方案。对此有一个干净的解决方案吗？

Answer 1

使用边框的position:absolute技巧来了解这一点。

＆＃13;

＆＃13;

body {
    margin: 0;
    padding: 1em;
}
body > ul {
    border-bottom: 1px solid black;
    overflow: hidden;
}
a {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li {
    line-height: 2em;
    position: relative;
}
li ul {
    padding-left: 1em;
}
li:after {
    content:"\00A0";
    position: absolute;
    width: 200%;
    left: -100%;
    top: 0;
    border-top: 1px solid black;
    z-index: -1;
}

＆＃13;

<ul>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a></li>
            <li>
                <a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a></li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

小提琴演示： http://jsfiddle.net/Lr5cmoo6/

Answer 2

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

这可以帮到你：

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;
}

Answer 3

您可以通过应用重复linear-gradient作为顶级ul的背景来伪造边框。然后，您只需要为列表项设置一条规则来设置填充。

以下是一个例子：

＆＃13;

＆＃13;

body{
    font-family:arial;
    font-size:14px;
    margin:0;
}
body>ul{
    background:linear-gradient(0deg,#000 3.333%,#fff 3.333%);
    background-size:100% 30px;
}
ul{
    margin:0;
    padding:0;
    list-style-type:none;
}
li{
    line-height:30px;
    padding:0 1em;
}

＆＃13;

<ul>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a></li>
            <li>
                <a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a></li>
        </ul>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;