CSSで横並びリストメニュー(Tips)

メニューを横に並べたいんだけど、tableは使いたくないとか
CMSの吐き出すリストを横並びで表示させたい時とかに使えるんじゃなかろうか。

わかりやすくて使いやすいソースを見つけたので備忘録。

HTML

<ul id="globalNavi">
 <li><a href="./">List1</a></li>
 <li><a href="./">List2</a></li>
 <li><a href="./">List3</a></li>
 <li><a href="./">List4</a></li>
</ul>

CSS

ul#globalNavi {
	margin: 0;
	padding: 0;
	width: 500px; /* 必ずwidthの設定をしてください */
}

ul#globalNavi:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

ul#globalNavi li {
	margin: 0;
	padding: 0;
	float: left;
	width: 120px; /* ボタンの幅 */
	line-height: 1;
	list-style-type: none;
}

ul#globalNavi li a {
	padding: 0.6em 10px; /* ボタンの厚みはここで調整 */
	display: block;
	position: relative;/* IE6でマウス反応領域がおかしいのをFix */
	font-size: 12px;
	color: #333;
	text-align: center;
	text-decoration: none;
	background-color: #eee;
}

ul#globalNavi li a:hover {
	color: #000;
	background-color: #ddd;
}

汎用性も高くて使いやすい。
元ネタはこちら。

こちらもあわせてどうぞ

• お散歩写真でギャラリーのテスト
• WP Vicuna-Ext. で、”続きを読む”リンクの”#extended”を消す方法
• 文系とか理系とか
• 似顔絵作成ツールUltimateFlashFaceが面白い
• 2010年の手帳はDELFONICS