このHTMLコードで何が問題になっていますか？

ボディの部分をメニューの下にしたいが、代わりにメニューがボディにマージされる。このHTMLコードで何が問題になっていますか？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Hi</title> 
    <style type="text/css"> 
    body 
    { 
     background-color: #369; 
    } 
    li.changeMe 
    { 
     background-color: #DEE; 
     color: #369; 
     font-weight: bold; 
     padding: 8px 16px; 
     margin: 5px; 
     display: inline; 
    } 
    #bodystuff 
    { 
     background-color: White; 
     display: block; 
     padding: 15px 10px; 
    } 


    </style> 
</head> 

<body> 
    <div style="margin: 15px 10px 0;"> 
    <div style="font-size: 30pt; font-weight: bold; color: White; font-family: Arial;">My Website</div> 
    <div style="float: right; display: block; margin: 0 0 25px 0"><ul style="list-style-type: none; "><li class="changeMe">Hi</li><li class="changeMe">Hello</li></ul></div> 
    <div id="bodystuff">Hi this is the body</div> 
    </div> 
</body> 
</html>

出典

2011-01-22 DarkLightA

これ以外の何かをするつもりであれば、私の更新コードを使用する必要があります。

私は多くのことを改善しました。あなたが望むなら、何が、なぜそれが説明できるのですか？

私は、メニューボタンが#bodystuffの上部に触れたかったと思っていましたが、他の投稿された回答はこれ以上変更することはありません。

Live Demo

<!DOCTYPE html> 
<html> 
<head> 
<title>Hi</title> 
<style type="text/css"> 
body { 
    background-color: #369; 
    font-family: Arial, sans-serif; 
} 
#container { 
    margin: 15px 10px 0; 
} 
#header { 
    font-size: 30pt; 
    color: #fff; 
    margin: 0; 
    padding: 0; 
    font-weight: bold 
} 
#bodystuff { 
    background-color: #fff; 
    clear: both; 
    padding: 15px 10px 
} 
#menu { 
    float: right 
} 
#menu ul { 
    list-style-type: none 
} 
#menu li { 
    background-color: #dee; 
    color: #369; 
    font-weight: bold; 
    float: right; 
    margin: 0 5px; 
} 
#menu a { 
    display: block; 
    padding: 8px 16px; 
} 
</style> 
</head> 

<body> 

<div id="container"> 
    <h1 id="header">My Website</h1> 
    <div id="menu"> 
     <ul> 
      <li><a href="#">Hi</a></li> 
      <li><a href="#">Hello</a></li> 
     </ul> 
    </div> 
    <div id="bodystuff"> 
     Hi this is the body 
    </div> 
</div> 

</body> 
</html>

出典

2011-01-22 22:05:42 thirtydot

私はあなたが浮くする必要がdiv要素でposition:absoluteを逃していると思います。それ以外の場合はインラインになります。

編集：申し訳ありませんが、私は質問を誤解しました。

出典

2011-01-22 21:45:48

のCSSにclear:bothを追加するだけで、フロートをクリアできます。

出典

2011-01-22 21:46:26 mVChr

#bodystuffの場合は、clear: both;をCSSに追加してください。

JS Fiddle demo。

出典

2011-01-22 21:46:29

メニューと本文の間にclearが必要です。そのように修飾

<!--- menu stuff ---> 
<div style="clear: both;"></div> 
<!--- body stuff --->

あなたの例：たとえばhttp://jsfiddle.net/redler/aqFGD/3/

出典

2011-01-22 21:46:54

あなたは「身体」の部分上記フロートを持っている、あなたは、新しいコンテンツの前にクリアされていません。

フローティングエレメントをクリアする必要があります。浮遊物を止め、新しいものを始める。

http://jsfiddle.net/aqFGD/1/

更新デモでの変更を参照してください。

<br style="clear: both;" />

出典

2011-01-22 21:47:18 Orbling

このHTMLコードで何が問題になっていますか？

答えて

関連する問題