対象:WEBデザイン・プログラミング
回答数: 1件
回答数: 1件
回答数: 1件
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コンサルタント
-
解決方はいくつかありますが、、、
今回は一番簡単な解決方法をご案内させていただきます。
#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/
評価・お礼

モンガさん
2012/04/01 17:05非常にわかりやすい回答をありがとうございました。
(現在のポイント:-pt)
このQ&Aに類似したQ&A
表示中のコンテンツに関連する専門家サービスランキング