Question

我将列表项设置为2列，底部边距分隔2个项目的每个“行”。

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

但我想知道是否可以设置边框，使其在连续垂直线中继续，其高度与第二列一样高。< / p>

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

到目前为止：

（这很好）

（这不是我想要的，因为项目的下边距'切割'银线

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

我要做的一个简单的想法是将所有左侧项目放在一个div中，将右侧项目放在另一个div中并将样式应用于它。

.right,.left{
float:left; 
}
.left{
 border-right:2px solid grey; 
}

选项2：

替换以下代码行

li:nth-child(even):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}

以下......

li:nth-child(odd):after
{
    content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 130%;
    background: silver;
}

//this is optional in according to the look and feel you are expecting

li:last-child:after{
content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}
li:last-child:after
{
    content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 130%;
    background: transparent;
}

li:nth-last-child(3):after
{
    content: '';
    position: absolute;
    right: -11px;
    top:0;
    width: 4px;
    height: 100%;
    background: silver;
}

Answer 2

这适合你吗？

我已经修改了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;
}

Answer 3

有可能。但是，我需要将每个列表项的内容封装到div中，在我的示例中，div的高度为列表项的90％（因此我可以在底部设置边距）。然后，添加2个样式规则以获得银线。

li:nth-child(even):not(:nth-last-child(1)):not(:nth-last-child(2)):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:10;
    width: 4px;
    height: 100%;
    background: silver;
}
li:nth-child(even):nth-last-child(1):before,
li:nth-child(even):nth-last-child(2):before
{
    content: '';
    position: absolute;
    left: -11px;
    top:10;
    width: 4px;
    height: 90%;
    background: silver;
}

工作演示：http://jsfiddle.net/er144/mUAPT/

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

3 个答案: