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]質問には回答がつかないことがあります。

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

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

レッスン・教室

英語発音スカイプレッスン

英語発音指導をスカイプにて行います

妹尾 佳江

みいちゃんママの英語教室

妹尾 佳江

(英語発音とフォニックス指導の専門家)

レッスン・教室

フォニックススカイプレッスン

フォニックスをオンラインでスカイプを使用して教えます

妹尾 佳江

みいちゃんママの英語教室

妹尾 佳江

(英語発音とフォニックス指導の専門家)

レッスン・教室

記事制作に関するご相談

記事制作に関するご相談

運営 事務局

専門家プロファイル

運営 事務局

(編集部)

レッスン・教室 英語発音オンライン個人レッスン
妹尾 佳江
(英語発音とフォニックス指導の専門家)
セミナー Natural Coachig
丸本 敏久
(心理カウンセラー)