Question

我需要最后一条红线与前面的红线一样宽。 UL容器的宽度可能不同（这使得第n个选择器在这里无用）。并且每条LI线的高度也可能不同。

<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帮助的情况下找到解决方案。

更新。边框颜色应该是透明的。所以要小心重叠。

upd2。红线不应太长（它应该在最后一列+加法边距之后结束（边距 - 右：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

Answer 2

好的，那么这样的事情怎么样？使用9999px作为宽度的值似乎并且可能有点hacky，但无论什么都有效，对吧？

这是小提琴：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 +这一事实+我添加了一些额外的样式：删除正确的填充和{ {1}}因为我们要显示第一行的padding-top: 10px红线，您为此定义了:before

Answer 3

而不是使用li：之前尝试使用： -

    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值，因此将边框更改为背景为1px的高度。

内联块元素后的水平线

4 个答案: