[CSS]リストのナビゲーションの高さを揃えるチュートリアル
Post on:2008年1月31日
sponsors
CSS Globeのエントリー「line-heightを使用するメニュー」から、リストでマークアップしたナビゲーションの各項目の高さを揃えるスタイルシートの紹介です。
仕組みは、テキストリンクのa要素に対して、高さをline-heightで指定するものです。
HTML箇所の抜粋
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> <ul id="nav"> <li><a href="#">About Us</a></li> <li><a href="#">Contact us</a></li> </ul> </textarea> |
CSS箇所の抜粋
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> ul#nav li a{ line-height:42px; } </textarea> |
sponsors
