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 の助けを借りずに解決策を見つけたいと思っています。

更新。境界線の色は透明にする必要があります。そのため、重複には注意してください。

upd2. 赤い線は長すぎてはいけません (最後の列 + 追加マージン (margin-right:20px) の直後で終わる必要があります)。

4

4 に答える 4

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 に答える