- 2008-11-29 (土) 16:46
- Web作成
メニューを横に並べたいんだけど、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;
}
汎用性も高くて使いやすい。
元ネタはこちら。
こちらもあわせてどうぞ
- Newer: クルトガすごい
コメント:0件
トラックバック:0件
- この記事のトラックバックURL
- http://www.inolabo.net/20081129693/trackback