【CSS】横並びのナビゲーションを作る
CSSを使って横並びのナビゲーションを作ります。
ブラウザプレビュー
ポイント
#nav liをフロートさせるために、その親要素の#nav ulにoverflow: hidden;を指定する。すると横並びになる。ソース
HTML
<div id="nav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">カフェフード</a></li> <li><a href="#">カフェドリンク</a></li> <li><a href="#">インフォメーション</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div>
CSS
/* nav */ #nav{ width: 750px; font-weight: bold; margin: 50px auto; } #nav ul{ width: 750px; overflow: hidden; height: 40px; border-top: solid 1px #2C3785; border-left: solid 1px #2C3785; border-bottom: solid 1px #2C3785; background: #8C91DD; } #nav li{ width: 150px; float: left; line-height: 40px; font-size:16px; text-align: center; } #nav li a{ display: block; border-right: 1px solid #2C3785; color: #FFF; } #nav li a:hover{ background:#C6CCDB; }