我需要最后一条红线的宽度与之前的所有红线相同。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)之后结束)。