1

我需要最后一条红线的宽度与之前的所有红线相同。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 帮助的情况下找到解决方案。

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

更新2。红线不应该太长（它应该在最后一列+附加边距（margin-right：20px）之后结束）。

4

4 回答 4

0

好的，那么这样的事情怎么样？使用 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+ 我添加了一些额外的样式：删除正确的填充并且padding-top: 10px存在因为我们想要显示:before您定义的第一行的红线top: -10px

于 2013-04-10T08:49:15.977 回答
0

您可以使用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;
}

演示

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

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

演示

于 2013-04-10T08:23:11.917 回答
0

而不是使用 li:before 尝试使用：-

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

我想我终于明白了；）试试这个

我删除了<li>标签上的位置并top从选择器中删除了值:before，因此将边框更改为带背景的 1px 高度。

于 2013-04-10T10:26:29.850 回答