內嵌塊元素後的水平線

Question

我需要最後一條紅線與之前的所有紅線相等。 UL容器的寬度可能不同（這使得第n個選擇器在這裏無用）。 每個LI的線條高度也可能不同。

演示：http://jsfiddle.net/6ZX9W/34/

<ul> 
    <li>Medium medium medium medium medium contnent.</li><!-- 
    --><li>Short contnent.</li><!-- 
    --><li>Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long contnent.</li><!-- 
    --><li>Short contnent.</li><!-- 
    --><li>Even more long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long contnent.</li><!-- 
    --><li>Short contnent.</li><!-- 
    --><li>Medium medium medium medium medium contnent.</li> 
</ul> 

li { 
    position: relative; 
    display: inline-block; 
    width: 200px; 
    vertical-align: top; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    border: solid 1px #ccc; 
} 
li:before { 
    content: ''; 
    position: absolute; 
    top: -10px; 
    left: 0; 
    display: block; 
    width: 222px; 
    border-top: solid 10px rgba(255,0,0,.3); 
} 

希望找到沒有JavaScript的幫助解決。

upd。邊框顏色應該是透明的。所以要小心重疊。

upd2。紅線不應該太長（它應該在最後一列+添加邊距（margin-right：20px）之後結束）。

Answer 1

可以使用display: block，而不是display: inline-block爲您的列表：

li { 
    position: relative; 
    display: block; 
    width: 200px; 
    vertical-align: top; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    border: solid 1px #ccc; 
} 

Demo

，或者你可以過去裏設置不同的CSS：

li:last-child:before { 
    width: 450px; 
} 

Demo

Answer 2

好的，那麼這樣的事情呢？ 使用9999px作爲寬度值似乎和大概是種哈克，但無論什麼作品，對不對？

這裏是小提琴：http://jsfiddle.net/6ZX9W/26/

這裏是使用的CSS：

ul{ 
    margin: 0; 
    padding: 0; 
    padding-top: 10px; 
    overflow: hidden; 
    border: 1px #aaa dashed; 
    list-style: none; 
} 

li { 
    position: relative; 
    display: inline-block; 
    width: 200px; 
    vertical-align: top; 
    margin-right: 20px; 
    margin-bottom: 20px; 
    border: solid 1px #ccc; 
} 
li:before { 
    content: ''; 
    position: absolute; 
    top: -10px; 
    left: 0; 
    display: block; 
    width: 9999px; 
    border-top: solid 1px #f00; 
} 

當然，這一切都取決於一個事實，即在UL必須有overflow: hidden + I增加了一些額外的樣式：刪除正確的填充和padding-top: 10px是因爲我們想要顯示第一行的:before紅線，爲此您定義了top: -10px

Answer 3

而是採用李： 之前嘗試使用： -

li:nth-child(2n+1):before { 
     border-top: 1px solid #FF0000; 
     content: ""; 
     display: block; 
     left: 0; 
     position: absolute; 
     top: -10px; 
     width: 214%; /*(or 444px)*/ 
    } 

Answer 4

我想，我終於得到了一點;）嘗試this

我刪除您<li>標籤的位置和刪除top值:before選擇器，然後將背景更改爲1像素高度。