CSSのul liで作成したリストがボックスよりはみ出てしまう - WEBデザイン・プログラミング - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

注目のQ&AランキングRSS

対象:WEBデザイン・プログラミング

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マーケター 井上慎也

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

- good

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

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/

SEO
解決
方法

評価・お礼

モンガさん

2012/04/01 17:05

非常にわかりやすい回答をありがとうございました。

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

HTML5>CSS3>jQueryとやってきたのですが、その後 jqueryさん  2016-04-20 13:12 回答1件
ホームページを作ってほしい spyauctionさん  2013-03-05 22:25 回答2件
ホームページの印刷について plussmanさん  2013-10-15 14:55 回答1件
レスポンシブWebデザインの印刷について plussmanさん  2013-09-06 09:38 回答1件
ワードプレスに詳しい方お願いします taketoさん  2015-04-30 15:56 回答1件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

田尻 健二

心理カウンセラー・産業カウンセラー・夢分析家

田尻 健二

(心理カウンセラー)

レッスン・教室

マンツーマン「女性が私らしく働くためのスキルアップ講座」

ワークライフバランス実現。女性が私らしく働くためのスキルを身に付けます。

松井 千恵美

桜ことスクール

松井 千恵美

(マナーコンサルタント)

掛川 幸子

株式会社イーアンドシーエスサポート

掛川 幸子

(現場力強化・EQ人材育成スペシャリスト)