html - 行内 block 元素后的水平线

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

或者你可以为最后一个 li 设置不同的 css:

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

Demo