[英]Nested list-items with full width border?
我有一个无序列表,其中有多个嵌套项目,最多可达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解决方案。
您可以使用绝对定位的伪元素:
#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>
您可以将填充应用于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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.