2014/08/17
floatを使った横並びメニュー。面倒なところはfloatの解除とセンタリングテクニック。
2016/01/10 追記
clearFixをnew micro clearFixに変更( .cf は .clearFixのまま)
左寄せ、可変幅メニュー項目、clearFixでフロート解除
<div id="menu"> <ul class="clearFix"> <li><a href="#">ホームページ作成</a></li> <li><a href="#">HTML</a></li> <li><a href="#">スタイルシート</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">掲示板</a></li> </ul> </div>
#menu { margin:0px; } #menu ul { margin:0px; list-style-type: none; background: #004080 url(hor2_menu2_off.gif) repeat-x top; padding-left:0px; } #menu ul li { float: left; border-right: 1px #004080 solid; margin: 0px; text-align:center; /*width:150px;メニュー幅固定ならココを指定*/ } #menu ul li:first-child { border-left: 1px #004080 solid; } #menu ul li:hover { background: #004080 url(hor2_menu2_on.gif) repeat-x top; } #menu ul li a { margin: 0 0.5em; display: block; color: #ffffff; position: relative; /* IE6用 */ padding: 5px 5px; text-decoration:none; } /* --- clearfix フロートのクリアテクニック(new micro clearFix IE6+ --- */ .clearFix:before,.clearFix:after { content: ""; display: table; } .clearFix:after { clear: both; } .clearFix { zoom: 1; }
中央寄せ、可変幅メニュー項目、フロート解除は親要素にoverflow:hidden;を追加する
<div id="menu"> <ul> <li><a href="#">ホームページ作成</a></li> <li><a href="#">HTML</a></li> <li><a href="#">スタイルシート</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">掲示板</a></li> </ul> </div>
#menu { overflow: hidden; /*floatのクリアテクニック*/ } #menu ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; list-style: none; } #menu li { display: block; position: relative; left: -50%; /*right:50%;でもよい*/ float: left; /*width: 120px;メニュー幅固定ならココを指定*/ margin: 0; height: 31px; padding-left:20px; line-height:31px; text-align:center; color:#333; background:url(gazo.jpg) no-repeat left top; } #menu li a { display: block; /*クリック有効域をテキストでなくblockに*/ margin-right:-1px;/*項目間の境界が太くならないように*/ padding-right:20px; background:url(gazo.jpg) no-repeat right top;/*画像右端を表示*/ color:#333; text-decoration: none; } #menu li a:hover { text-decoration: underline; }
参照サイト
http://yume.hacca.jp/koiki/css/listyoko.htm
http://www.tagindex.com/template/menu/hor2_menu2.html
Ida Qitailang