css - 2 色ボーダー右

Question

JavaScript、追加の div を使用せず、少なくとも IE8 と互換性のある、li 要素ナビゲーションで 2 色の右ボーダーを作成したいと思います。したがって、すべてのナビゲーションアイテムには、黒とグレーの右の境界線が表示されます。

上の画像は、私のブレークポイントの 1 つです。現在、border-left と -right を使用しています。行に積み重ねられた後にフロートされたアイテムを制御できないため、これは望ましい結果を達成しません+その他の問題。

<nav>
    <ul>
        <li><a href="">NHL Home</a></li>
        <li><a href="">Seasons</a></li>
        <li><a href="">Teams</a></li>
        <li><a href="">Records</a></li>
        <li><a href="">Players</a></li>
        <li><a href="">Player origins</a></li>
        <li><a href="">Player age maps</a></li>
        <li><a href="">Analysis</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

どうすればこれを達成できますか？

score 6 · Accepted Answer

まず、次の CSS ルールを追加します。

nav ul li {
    box-sizing:border-box;
}

これにより、ブラウザは、オブジェクトの全幅内でボーダーとパディングを考慮します。次に、境界線を追加できます。

border-left:1px solid #CCC;
border-right:1px solid #000;

score 2 · Accepted Answer

<style type="text/css">
  ul li {
    border-right: 1px solid black;
    box-shadow: 1px 0px gray;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=90, Color='#000000');
  }
</style>

score 2 · Accepted Answer

これを試して

http://jsfiddle.net/umzA3/6/

li:after {
content:"";
position:absolute;
z-index:1;
border-right:1px solid black;
display:block;
top:0%;
right:0%;
height:100%;
}

ie8+で動作するはずです

css - 2 色ボーダー右

3 に答える 3

Related

Reference