我正在尝试编写一个简单的网站，但目前我卡在了页眉部分。无缘无故，我的元素没有按预期流动。 div“header_h”必须向左浮动，而 nav 必须向右浮动。但是每当我 float 其中一个元素时，它就会从标题中消失。 (例如:http://www.youscreen.de/yuphdkhlj00.jpg)。当我像在代码中一样同时 float 两者时，它看起来像这样:http://www.youscreen.de/isiqgladz04.jpg
它看起来应该是这样的:http://www.youscreen.de/sdbzjigvs77.jpg (通过标题中的高度创建，但我猜这不是解决方案)。
*{
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;
}<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>最佳答案
这是已知的 float 问题。将 clearfix 应用于 header 应该可以工作
检查这个片段
*{
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
希望对你有帮助
关于html - 元素没有正确 float ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40267989/