« clearfix | トップページ | GPSを試す »

2009年3月10日 (火)

横並びリンクをボーダーで区切る

リストタグを使ったメニューでは横並びにするためにおきまりのCSSの設定がある。

先日、こんな設定を知ったのでメモ。

こんなメニューリストがある。

<div id="menu">
<ul>
<li>ああ</li>
<li>いい</li>
<li>うう</li>
<li>ええ</li>
<li>おお</li>
</ul>
</div>

それをこのようにスタイルシートで指定する。

div#menu {
   overflow:hidden;
   _height:1.5em; /* for IE6 */
}

ul {margin-left:-6px;}
li {padding:0 5px;display:inline;border-left:1px solid #666;}

  • ああ
  • いい
  • うう
  • ええ
  • おお

なかなか洒落てる。

Li要素にpaddingを指定して、左側にのみボーダーを指定する。
そうしておいて、paddingが5pxでボーダーが1pxだから、ul全体の左マージンを6pxマイナス指定する。(これをネガティブマージンと呼ぶ)
しかし、全体はoverflow:hiddenを指定しているから、一番左側のボーダーだけはみ出して非表示になる。

よく考えたモンだ。感心したのでメモ。
これからはこれ使おうかな。

« clearfix | トップページ | GPSを試す »

03 アプリケーション」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/514829/44307702

この記事へのトラックバック一覧です: 横並びリンクをボーダーで区切る:

« clearfix | トップページ | GPSを試す »