[CSS]リストのナビゲーションの高さを揃えるチュートリアル

CSS Globeのエントリー「line-heightを使用するメニュー」から、リストでマークアップしたナビゲーションの各項目の高さを揃えるスタイルシートの紹介です。

Using line-hieght with menus

仕組みは、テキストリンクのa要素に対して、高さをline-heightで指定するものです。

デモページ

HTML箇所の抜粋

<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Contact us</a></li>
</ul>

CSS箇所の抜粋

ul#nav li a{
	line-height:42px;
}

Post on:2008年1月31日