4

div に含まれるナビゲーション リストを完成させようとしています。

各アイテムの右側に枠線を配置して、各アイテムの間隔を空けるように設定しました。最後のアイテムではなく、中間のアイテムにのみこの境界線を設定したいと考えています。

HTML:

<div id="container-navigation">
    <ul id="navigation">
        <li><a href="index.html" target="_self">home</a></li>
        <li><a href="aboutus.html" target="_self">about</a></li>
        <li><a href="solutions.html" target="_self">solutions</a></li>
        <li><a href="training.html" target="_self">training</a></li>
        <li><a href="payments.html" target="_blank">payments</a></li>
        <li><a href="contact.html" target="_self">contact</a></li>
    </ul>
</div>

CSS:

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-right: 1px solid #ffffff;
}

これを達成するための最良の方法は何ですか？最後の項目に一意のクラスを与えて、別の CSS エントリを作成しますか?

4

6 に答える 6

2

thgaskell が示唆するように、これを行う 1 つの方法を次に示します。

#navigation li a {
    color: green;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-right: 1px solid red;
}
#navigation li:last-child a {
    border-right: none;
}

デモ: http://jsfiddle.net/audetwebdesign/G3mD9/

注:疑似クラスは IE9+ でサポートされているため、IE7+ に適しているlast-childよりも少し制限されています。first-child

于 2013-08-31T01:10:40.837 に答える
1

私だったら、境界線を右ではなく左に移動します。

#navigation li a {
    border-left: 1px solid #ffffff;
}

そして、first-childブラウザ間の互換性が良好なまま使用します。

#navigation li:first-child a {
    border-left: 0 none;
}
于 2013-08-31T01:10:23.623 に答える
1

古いブラウザー (IE7+ など) をサポートする必要がある場合は、CSS セレクターを使用できるように、境界線を右側から左側に反転する必要がありますfirst-child。

現在の css を次から変更します。

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-right: 1px solid #ffffff;
}

に：

#navigation li a {
    color: #ffffff;
    line-height: 22px;
    font-size: 11px;
    text-decoration: none;
    padding: 5px 15px 6px 15px;
    border-left: 1px solid #ffffff;
}

#navigation li:first-child a {
    border-left: none;
}

フィドルの例

于 2013-08-31T01:11:08.253 に答える
0

簡単な方法である :last-child セレクターを試してください。

#navigation li a:last-child {
     border-right: none;
}
于 2013-08-31T00:55:45.437 に答える