CSS元素出现在错误的位置_Css

CSS元素出现在错误的位置

css

CSS元素出现在错误的位置,css,Css,我有以下示例代码： <!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 c

我有以下示例代码：

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

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

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

部分问题在于您的

类型不正确。它应该是

type=“text/css”

部分问题在于您的

类型不正确。它应该是

type=“text/css”

我想你忘了用类“body\u main”关闭div的div标签

问题是你没有清除浮动

当您浮动

.top\u nav\u right

时，它会创建一个空白空间，它下面的元素将尝试填充该空间。由于将其向右浮动，额外的空间将位于

.top\u nav\u right

的左侧，这将使

.top\u nav

及其内容显示在左侧（或之前）

要解决此问题，只需将以下CSS定义添加到

.top\u nav\u right

中，即可清除由

.top\u nav\u right

生成的浮点值

clear: both;

您可以在此处看到清除的结果：

您可以在此处了解有关正确清除浮动的原因和方法的更多信息：

此外，您需要确保关闭所有

标记。我注意到

.body\u main

缺少一个结束标记。

问题是您没有清除浮动