Question

我正在尝试编写一个简单的网站代码，但此刻我仍被困在标题部分。无缘无故，我的元素没有按预期流动。 div＆＃34; header_h＆＃34;必须向左浮动，导航必须向右浮动。但每当我浮动其中一个元素时，它就会从标题中移出。（例如：http://www.youscreen.de/yuphdkhlj00.jpg）。当我像在代码中一样同时浮动它们时，它看起来像这样：http://www.youscreen.de/isiqgladz04.jpg

这就是它的样子：http://www.youscreen.de/sdbzjigvs77.jpg（通过标题中的高度创建，但这不是我猜的解决方案。）

＆＃13;

*{
  margin: 0;
  padding: 0;
}

#kopfbereich{
  width: 100%;
  background-color: #34495e;
}

header{
  display: block;
  width: 1000px;
  margin: 0px auto;
}

#header_h{
  float: left;
}

nav{
  float: right;
}

nav ul{
  list-style-type: none;
}

nav ul li{
  display: inline-block;
}

＆＃13;

<html>
  <head>
    <title>Design #1</title>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div id="kopfbereich">
      <header>
        <div id="header_h">
          <h1>Fancy</h1>
          <h2>Testsite</h2>
        </div>
        <nav>
          <ul>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
          </ul>
        </nav>
      </header>
    </div>
  </body>
</html>

＆＃13;

Answer 1

这是已知的浮点问题。应该对标题应用clearfix它应该可以工作

检查此代码段

*{
  margin: 0;
  padding: 0;
}

#kopfbereich{
  width: 100%;
  background-color: #34495e;
}

header{
  display: block;
  width: 1000px;
  margin: 0px auto;
}
.clearfix::after{
  display:table;
  visibility:hidden;
  clear:both;
  content:"";
}
#header_h{
  float: left;
}

nav{
  float: right;
}

nav ul{
  list-style-type: none;
}

nav ul li{
  display: inline-block;
}

    <div id="kopfbereich">
      <header class="clearfix">
        <div id="header_h">
          <h1>Fancy</h1>
          <h2>Testsite</h2>
        </div>
        <nav>
          <ul>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
            <li><a href="#">Text</a></li>
          </ul>
        </nav>
      </header>
    </div>

此处codepen

希望这有帮助

Answer 2

我认为这不是这个问题的正确答案，而只是一个有效的解决方案！我想你的问题只是因为你设置为width:100%;而header设置为width:1000px;所以无论窗口（body标记）width是{{1}也会拥有它！但无论窗口kopfbereich如何，width总是header，您的问题似乎只与窗口1000px小于width的时间一致限制区域的颜色，但菜单链接（1000px）浮动在nav 1000px的右端..但是在header超过width的窗口上一切正常1000px。

所以对于这个例子，我认为你应该从background-color取kopfbereich并将其交给header，你需要设置header的{{1}}也是某种东西......比如

height

*{
  margin: 0;
  padding: 0;
}

#kopfbereich{
  width: 100%;

}

header{
  display: block;
  width: 1000px;
  height:100px;
  background-color: #34495e;
  margin: 0px auto;
}

#header_h{
  float: left;
}

nav{
  float: right;
}

nav ul{
  list-style-type: none;
}

nav ul li{
  display: inline-block;
}

元素没有正确浮动

2 个答案: