Question

我希望身体部位位于菜单下方，而是将菜单与身体合并。

<!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>

Answer 1

只需将clear: both;添加到#bodystuff的css中。

JS Fiddle demo

Answer 2

您需要在菜单和正文之间clear。例如：

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

您修改的示例：http://jsfiddle.net/redler/aqFGD/3/

Answer 3

您在“正文”部分上方有一个浮动，并且您在新内容之前没有清除。

必须清除浮动元素，即。停止浮动并启动一个新的。

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

请参阅更新演示中的修改。

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

Answer 4

只需将clear:both添加到#bodystuff的CSS即可清除浮动广告。

Answer 5

我认为你错过了需要浮动的div中的position:absolute。否则它将是内联的。

编辑：对不起，我误解了这个问题。

Answer 6

如果你打算做更多的事情而不仅仅是玩弄它，你应该使用我更新的代码。

我改进了很多东西 - 如果你愿意，我可以解释什么和为什么。

我认为您希望菜单按钮触及#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>

这个HTML代码有什么问题？

6 个答案: