0

我有以下示例代码：

<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
<link rel="stylesheet" type="css" href="style.css">
</head>
<body>
    <div class="left_nav">1 2 3</div>

    <div class="body_main">
        <div class="top_nav_right">Create account Log in</div>

        <div class="top_nav">
            <span>Article Talk</span> <span class="top_nav_right2">Read
                Edit View history</span>
        </div>
</body>
</html>

在我的 CSS 中：

.body_main {
    margin-left: 11em;
}


.top_nav_right {
    float: right;
    margin-top: 1em;
    margin-bottom: 1em;
}

.top_nav {
    height: 2.5em;
    margin-top: 3em;
}


.top_nav_right2 {
    float: right;
}

我不确定为什么“创建帐户登录”出现在“阅读编辑查看历史记录”下方。这些都是 div，我在 Create 之后有 Read 。

此外，出于某种原因，只有 Chrome 显示 CSS。我已将 CSS 放入验证器中

4

3 回答 3

2

问题是你没有清除你的浮动。

当你浮动.top_nav_right时，它会创建一个空间，它下面的元素将尝试填充。由于您将其浮动到右侧，因此额外的空间将位于 的左侧.top_nav_right，这将使其.top_nav内容出现在左侧（或之前）。

要解决此问题，您可以.top_nav_right通过将以下 CSS 定义添加到.top_nav

clear: both;

你可以在这里看到清除的结果：http: //jsfiddle.net/P7QTC/2/

您可以在此处了解有关正确清除浮动的原因和方法的更多信息：http: //css-tricks.com/the-how-and-why-of-clearing-floats/

此外，您需要确保关闭所有<div>标签。我注意到.body_main缺少一个结束标签。

于 2013-03-07T23:45:30.113 回答
1

部分问题是您的<link>类型不正确。它应该是type="text/css".

于 2013-03-07T23:42:00.523 回答
1

我想你忘了用类'body_main'关闭div的div标签

于 2013-03-07T23:42:57.047 回答