Home > Tags > css

css

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;
}

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

Home > Tags > css

管理人について

webmaster@inolabo.net

不具合の報告、ご意見、ご感想などはこちらへ。

･文具好き
･Web屋の卵
･FXのんびりやってます

twitter:＠ino717

このブログのRSS
Calendar
« 2010 年 8月 »
M T W T F S S
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
最近の記事
人気の記事
アーカイブ
カテゴリー
Tag Cloud
最新ツイート
Amazon

Return to page top