メニューバーのレイアウト崩れ

ブログBlog

こんばんは、東郷です。

今回は1行に収まる横並びのメニューバーを作った時、

レイアウトを崩さない方法について調べてみました。

以下はfloatを使って作成した場合のコーディング例です。

html

</ul>

cssの「float: left;」でメニューバーを横並びにする際、

ブラウザの画面サイズによっては回り込みが発生して

メニューバーが2段に表示されることがあります。

そんな時は「overflow: hidden;」を使って回り込みを解除すると

レイアウトが崩れなくなります。

css

#nav {

list-style: none;

overflow: hidden;

}

#nav li {

width: 140px;

text-align: center;

background-color: #ff4500;

float: left;

height: 50px;

line-height: 50px;

margin-right: 2px;

}

#nav li a {

text-decoration: none;

color: #ffffff;

font-weight: bold;

padding: 20px;

}