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

Question

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

Answer 1

这适合你吗？

我 hust 修改了 li:before 所以它占据了整个高度，包括 li margins 使用 padding-top

然后我将它定位得更高 (top:-30px;) 所以只有下一个 evn li 有分隔符。这使得分隔符溢出 ul 的 on 所以我将它设置为 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;
}