具有全寬邊框的嵌套列表項？

Question

我有一個無序列表，其中有多個嵌套項目，最多可達5級。 為了分隔每個列表項，我添加了一個border-bottom如下：

  li { border-bottom: 1px solid red; } ul { list-style: none; padding-left: 1em; } 

 <ul> <li>0.1 comment</li> <li>0.2 comment</li> <li> <ul> <li>1.1 comment (reply on 0.2)</li> <li>1.2 comment (reply on 0.2)</li> <li> <ul> <li>2.1 comment (reply on 1.2)</li> </ul> </li> <li>1.2 comment (reply on 0.2)</li> </ul> <li>0.3 comment</li> </ul> 

是否有可能有一個bottom-border不繼承列表項的填充並拉伸整個寬度？ 我認為可以使用background-image來完成，但我更願意找到純CSS解決方案。

Answer 1

您可以使用絕對定位的偽元素：

 #root { position: relative; } li:after { content: '\\0200B'; /* Zero-width space to place the border below the text */ position: absolute; /* Absolutely positioned with respect to #root */ z-index: -1; /* Place it behind the li, eg to avoid preventing selection */ left: 0; right: 0; border-bottom: 1px solid red; } ul { list-style: none; padding-left: 1em; } 

 <ul id="root"> <li>0.1 comment</li> <li>0.2 comment<br />second line<br />third line</li> <li> <ul> <li>1.1 comment (reply on 0.2)</li> <li>1.2 comment (reply on 0.2)</li> <li> <ul> <li>2.1 comment (reply on 1.2)</li> </ul> </li> <li>1.2 comment (reply on 0.2)</li> </ul> <li>0.3 comment</li> </ul> 

Answer 2

您可以將填充應用於li並為ul提供負邊距。 （ 它需要每個級別的新規則 ）

 ul { list-style:none; padding-left: 0; } li { border-bottom: 1px solid red; } /*level 2*/ li li{padding-left: 1em;} li li ul{margin-left: -1em;} /*level 3*/ li li li{padding-left: 2em;} li li li ul{margin-left: 2em;} /*level 4*/ li li li li{padding-left: 3em;} li li li li ul{margin-left: -3em;} /*level 5*/ li li li li li{padding-left: 4em;} li li li li li ul{margin-left: -4em;} /*remove double borders*/ li li:last-child{border-bottom:0;} 

 <ul> <li>0.1 comment</li> <li>0.2 comment</li> <li> <ul> <li>1.1 comment (reply on 0.2)</li> <li>1.2 comment (reply on 0.2)</li> <li> <ul> <li>2.1 comment (reply on 1.2)</li> </ul> </li> <li>1.2 comment (reply on 0.2)</li> </ul> <li>0.3 comment</li> </ul>