divs之間的垂直線

我想在下圖中的綠色塊之間添加一條垂直線。我正在使用:after來做到這一點。但是我不想在最後一個塊之後顯示這一行。有沒有什麼竅門可以做到這一點？divs之間的垂直線

enter image description here

CSS：

.block{ 
    width: 20px; 
    height: 20px; 
    margin-right: 20px; 
    background: green; 
    float: left; 
} 

.block:after { 
    content: ''; 
    width: 0; 
    height: 100%; 
    position: absolute; 
    border: 1px solid black; 
    top: 0; 
    left: 10px; 
}

演示： http://jsfiddle.net/rhwb7b2o/

注：列表項的高度變化。如果需要，可以更改HTML標記。

來源

2014-11-25 user1355300

這是一個答案，這將有助於你： [計算器] [1] [1]：http://stackoverflow.com/questions/5449872/css -notlast-childafter-selector – kapantzak 2014-11-25 14:11:29

添加position:relative到li元素，使每行不覆蓋整個ul。

然後添加li:last-child .block{position:relative;overflow:hidden;}來處理最後一個元素。

演示在http://jsfiddle.net/gaby/qj2dbdkz/

來源

2014-11-25 14:13:51

@ user1355300：我更新了你自己的JSFiddle http://jsfiddle.net/rhwb7b2o/1/ - 爲了達到行結尾部分的效果，你還可以添加一個'li：last -child .block：after'，高度爲17px; – 2014-11-25 14:18:45

使用:not選擇器與:last-child選擇器。就像這樣：

.block:not(:last-child):after { /* ... */ }

來源

2014-11-25 14:11:32 bzeaman

divs之間的垂直線

回答

相關問題