0

http://jsfiddle.net/R5G56/

境界線と輪郭がはめ込まれた効果を持つナビゲーションバーを作成しようとしています。最初と最後のナビゲーションアイテムの外側にも同じはめ込み境界線を設定したいと思います。輪郭が境界線と同じ色なので、最初のナビゲーションアイテムで効果を得ることができますが、最後のナビゲーションアイテムにアウトラインを適用すると、周囲のすべてが変わるため、ばかげているように見えます。

私がこれを達成できるかどうか何か考えはありますか？

これが最初と最後のアイテムのCSSです。残りのCSSはjsfiddleにあります。

.navigation li:first-child a {
    outline:1px solid #000;
}
.navigation li:last-child a {
    outline:1px solid #383838;
}
4

3 に答える 3

1

li簡単な解決策は、タグの代わりにタグに余分な境界線を適用することaです。したがって、新しい CSS は次のようになります。実際の例: http://jsfiddle.net/R5G56/6/

.navigation li:first-child{
    border-left:1px solid #000;
}
.navigation li:last-child {
    border-right:1px solid #383838;
}

タグはaセレクターから削除され、 およびにoutline切り替えられました。border-leftborder-right

于 2012-12-29T00:18:27.610 に答える
0

ボックスシャドウを使用して境界線をだましていただけませんか。1つのステートメントで複数を割り当てることができます

于 2012-12-28T23:22:54.570 に答える
0

http://jsfiddle.net/R5G56/5/

それはあなたが望んでいることですか？そうでなければ、最後の子を二重に概説していると思います。 

.navigation li:last-child a {
    border-right:1px solid #383838;
}
于 2012-12-28T21:07:41.680 に答える