内嵌块元素后的水平线

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像素高度。