搭配全寬邊框和壓痕

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

無法通過嵌套增加元素的邊距/填充。

願這可以幫助你：

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 2

看看這個使用position:absolute技巧的邊界。

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

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

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

Answer 3

你可以假的邊界通過應用重複linear-gradient作爲頂級ul的背景。然後你需要只需要一個規則來爲你的列表項設置你的填充。

下面是一個例子：

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

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