偶數列表項上的連續左邊界/分隔符？

Question

我有兩列設置的列表項目，底部空白分隔了每個「行」的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所以它採取的整個高度，包括使用padding-top

然後我定位它heigher（top:-30px;）的limargins所以只剩下一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 2

一個簡單的想法，我會做的是把所有左側的項目在一個格，右側項目在另一個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 3

這是可能的。但是，我需要將每個列表項的內容封裝到一個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/