Question

我有以下示例代码：

<!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 one之后有Read。

此外，由于某些原因，只有Chrome会显示CSS。我已将CSS放入验证器

Answer 1

问题是你没有清理浮子。

当您浮动.top_nav_right时，它会创建一个空间空间，其下方的元素将尝试填充。由于您将其向右浮动，额外的空格将位于.top_nav_right的左侧，这将使.top_nav及其内容显示在左侧（或之前）。

要解决此问题，您可以通过将以下CSS定义添加到.top_nav_right来简单地清除.top_nav生成的浮动

clear: both;

您可以在此处查看明确的结果：http://jsfiddle.net/P7QTC/2/

您可以在此处详细了解清除浮动的原因和方式：http://css-tricks.com/the-how-and-why-of-clearing-floats/

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

Answer 2

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

Answer 3

我想你忘了用类'body_main'

关闭div的div标签

CSS元素出现在错误的地方

3 个答案: