您好，我正在尝试为我的网站创建一个复杂的 header 。现在这个标题由两部分组成。
- Logo - 为此使用 div。标题的 15%。显示:内联 block
- 导航 - 为此使用导航。标题的 85%。显示:内联 block
但在浏览器中，我看到导航顶部的 Logo 保存在堆栈中。
如何解决这个问题。
以下是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<!-- main css-->
<link rel="stylesheet" type="text/css" href="./css/main.css"/>
</head>
<body>
<header>
<div id='logo'>
<p>LOGO</p>
</div>
<nav>
klkdfglkdfjklg
</nav>
</header>
<footer></footer>
</body>
</html>
**CSS**
body {
padding: 0;
margin: 0;
border: 0;
background-color: #ccc;
}
header {
background-color: #444;
padding: 0;
margin: 0;
text-align: center;
}
#logo {
display: inline-block;
background-color: yellow;
padding: 0;
margin: 0;
border: 0;
width: 15%;
}
nav {
display: inline-block;
padding: 0;
margin: 0;
border: 0;
width: 85%;
background-color: red;
}
最佳答案
在你的例子中，nav 和 div 在你的 header 元素内，而 div 在 nav 的顶部。你可以试试
CSS
nav {
float:left;
}
#logo {
float:left;
}
关于html - 为什么 div 和 Nav 下显示为 block ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28557182/