CSSのul liで作成したリストがボックスよりはみ出てしまう

スキル・資格 WEBデザイン・プログラミング 2012/02/25 21:18

CSSのul liで4つの選択肢をfloatで作成しました。DreamWeaverでは4つの選択肢（1行に2つの選択肢、計2行）がDIVのボックスに全部綺麗に収まるのですが、IE8では2つの選択肢（1行目）のみがDIVのボックスに収まり、残る2つ（2行名）がボックスよりはみ出します。どう解決すればよろしいでしょうか。HTMLおよびCSSは次のとおりです。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Untitled Document</title>
<style type="text/css">
#menu{
width: 200px;
line-height:15px;
border:3px solid #4D2704;
background-color:#fff;
text-align: left;
padding: 5px 10px 30px 10px;
}
#menu ul{
width: 200px;
margin: 0;
padding: 0;
list-style: none;
}
#menu li{
padding: 0;
margin: 0;
float: left;
width:100px;
}
#menu a{
display: block;
border:1px solid #4D2704;
background-color: #fff;
font-size: x-small;
padding: 3px;
text-decoration: none;
color: #333;
margin: 1px;
text-align: center;
}
#menu a:hover{
background-color: #BF5E5E;
color: #fff;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">ホームページ</a></li>
<li><a href="#">リスト</a></li>
<li><a href="#">日記</a></li>
<li><a href="#">掲示板</a></li>
</ul>
</div>
</body>

モンガさん（東京都 / 男性 / 39歳）

回答：1件

SEOマーケター　井上慎也
ITコンサルタント

解決方はいくつかありますが、、、

2012/03/22 17:00 詳細リンク

: (3.0)

今回は一番簡単な解決方法をご案内させていただきます。

#menu{
width: 200px;
・・・

↑
この「width...」の下にこれを入れてみてください。

height: 26px;

すると丁度よくなると思いますよ。

その他不明点等あればお気軽にご相談ください。

SEO株式会社井上慎也
渋谷区宇田川町36-1 山和ビル3F
03-5428-3357

http://www.seojapan.co.jp/

高機能無料SEOツール
→ http://www.seojapan.co.jp/seotool/

次世代クラウド型相互リンク集
→ http://mutuallink.seojapan.co.jp/