ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.3960625 フロートするとメニューが落ちる　IE6で不可
質問者：rakuda2525 以下のようなhtmlを作成し、CSSを適用しました。
メニューを作成する為に、120×50のメニューボタンを横並びにする為、
フロートを使ったのですが、
FireFoxでは正常に表示されるのですが、
IE6だとメニューが一文字ずつ、落ちて表示されてしまいます。
どうすればいいのでしょうか。

■html
<div id="wrapper">

<div id="header">

<ul>
<li><a href="#">a</a></li>
<li><a href="#">b</a></li>
<li><a href="#">c</a></li>
<li><a href="#">d</a></li>
<li><a href="#">e</a></li>
</ul>

</div>

<div id="left">
</div>

<div id="right">
</div>

<div id="footer">
</div>

</div>

■CSS
body {
text-align:center;
font-size:small;
}

#wrapper {
text-align:left;
margin:0 auto;
width:600px;
}

#header {
}

#left {
float:left;
width:200px;
}

#right {
float:left;
width:400px;
}

#footer {
clear:both;
}

#header li a {
display:block;
float:left;
width:120px;
height:50px;
}
困り度：
  • すぐに回答を！
質問投稿日時：
08/04/19 21:34
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答良回答10pt
ANo.2 >なぜaをフロートするとボックスが落ちてしまうのでしょうか・・。

この場合、aはliの子要素ですから、親を無視して横並びにしようとすると
親に邪魔されるのでしょう
回答者：yambejp
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/04/21 12:10
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答良回答20pt
ANo.1 こんにちは

レイアウトはborderをつけたりbackground-colorをつけたりすることでどのような状態になっているか確認すると分かりやすいですよ

ブラウザの<li>のheightの解釈の違いとfloatの特性によってそのような状態になってます
floatすると実質の高さは0になりますが

<style type="text/css"><!--
li { background-color:blue; height:0px;}
--></style>

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

とするとIEとFirefoxで表示が違います
これにfloat:left;の特性
左上から配置していく
前のfloatに当たるとそこから配置していく
が重なってそういった状態になってます

リストフロートの場合は<li>の中身ではなく<li>をfloatしてやります

#header ul {
margin:0px;
padding:0px;
list-style:none;
}
#header li {
float:left;
}
#header li a {
dosplay:block;
width:120px;
height:50px;
}
回答者：leap_day
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/04/19 23:14
この回答へのお礼aではなく、liをフロートする事で解決しました。
ありがとうございました！
所で、なぜaをフロートするとボックスが落ちてしまうのでしょうか・・。
 
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ