我在 2 列中设置了列表项,底部边距将 2 项的每个“行”分开。
在每个偶数列表项上设置左边框很容易...
但我想知道是否可以设置边框,使其以连续的垂直线延伸,其高度与第二列一样高。
此外,我不想在列表项上使用底部填充,因为那样(除其他外)分隔符会突出到列表项下方。
这是到目前为止的内容:
(这个不错)
(这不是我想要的,因为元素的底部边距“切割”了银线
标记:
<ul>
<li></li><li></li><li></li>
</ul>
CSS:
ul
{
list-style: none;
width: 220px;
background: wheat;
}
li
{
display:inline-block;
background: pink;
width: 100px;
height: 100px;
margin-bottom: 25px;
position: relative;
}
li:nth-child(even)
{
margin-left: 18px;
}
li:nth-child(even):before
{
content: '';
position: absolute;
left: -11px;
top:0;
width: 4px;
height: 100%;
background: silver;
}
最佳答案
这适合你吗?
我 hust 修改了 li:before
所以它占据了整个高度,包括 li
margins
使用 padding-top
然后我将它定位得更高 (top:-30px;
) 所以只有下一个 evn li
有分隔符。这使得分隔符溢出 ul
的 on 所以我将它设置为 overflow:hidden
CSS:
*
{
margin:0;padding:0;
}
ul
{
list-style: none;
width: 220px;
background: wheat;
overflow:hidden;
}
li
{
display:inline-block;
background: pink;
width: 100px;
height: 100px;
margin-bottom: 25px;
position: relative;
}
li:nth-child(even)
{
margin-left: 18px;
}
li:nth-child(even):before
{
content: '';
position: absolute;
left: -11px;
top:-30px;
width: 4px;
height: 100%;
background: silver;
padding-top:30px;
}
关于html - 偶数列表项上的连续左边框/分隔符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20969460/