リスト要素をfloatで横並びにした際、「|」などで区切るケースも多いと思います。ただし、テキストで|を入れてしまうと、装飾のための文字としての扱いのため、なんとなく気持ち悪い感じ。こんな時はborderプロパティを使用し実現します。
実現したいレイアウト
今回のポイントとしては、ホームの左側にはボーダーを表示させたくない。2種類のテクニックを紹介します。
Case1
liに左ボーダーを指定して、さらにulの左にネガティブマージン指定。そしてはみ出す部分をdivのoverflowで隠す。
ulをdivで囲み、divにoverflow:hiddenを指定。ulをborder+padding分marginで左にマイナスする。結果、一番左のボーダーは見切れ状態にしてはみ出す部分はoverflow:hiddenで隠します。
Case2
li全てにに左ボーダーを指定して、classを使っていちばん左のボーダーを消す。
とりあえずliは全部左のボーダーを付けます。最後にborderとpaddingが0のclassを作成し、一番左のliの線を打ち消します。
CSS
ul { margin: 0; padding: 0; list-style: none; } ul li { margin: 0; padding: 0; } #navi { overflow: hidden; _height: 1.5em; /*IE6*/ } #navi ul { margin-left: -6px; } #navi ul li { display: inline; border-left: 1px solid #999; padding: 0 5px; } ul#list li { display: inline; border-left: 1px solid #999; padding: 0 5px; } ul#list li.noborder { border-left: none; padding-left: 0; }
HTML Case1
<div id="navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="index.html">サイトマップ</a></li> <li><a href="index.html">お問い合わせ</a></li> <li><a href="index.html">プライバシーポリシー</a></li> </ul> <!--//navi--></div>
HTML Case2
<ul id="list"> <li class="noborder"><a href="index.html">ホーム</a></li> <li><a href="index.html">サイトマップ</a></li> <li><a href="index.html">お問い合わせ</a></li> <li><a href="index.html">プライバシーポリシー</a></li> </ul>
コメントを残す