html - 在偶数列表项上有连续的左边框/分隔符？

我在2列中设置了列表项，底部边距将2个项目的“行”分开。

在每个偶数列表项上设置左边框很容易...

但是我想知道是否可以设置边框，使其沿连续的垂直线连续，其高度与第二列一样高。

另外，我不想在列表项上使用底部填充，因为这时（除其他事项外）分隔符将在列表项下方突出。

到目前为止，这是什么：

（很好）



（这不是我想要的，因为项目的底部边缘“切开”了银线

FIDDLE

标记：

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

最佳答案

这适合你吗？

我必须修改li:before，以便使用li占用整个高度，包括margins padding-top

然后，我将其定位在更高的位置（top:-30px;），因此只有下一个evn li具有分隔符。这会使分隔符溢出ul的打开，因此我将其设置为overflow:hidden

FIDDLE

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/