我正在尝试为我网站的后端编写一个简单的菜单。我想确保菜单和我网站顶部之间没有空格。看起来不错，直到我添加 <h>或 <p>
元素。菜单向下移动了大约 30px。
为什么会发生这种情况，我该如何解决？
<!DOCTYPE html>
<head >
<title>my page</title>
<link href="Styles.css" rel="stylesheet" />
</head>
<body>
<div id="PageWrapper">
<nav>
<ul id="navMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Manage Books</a>
<ul>
<li><a href="#">New Book</a></li>
</ul>
</li>
<li><a href="#">Reservations</a></li>
<li><a href="#">Lendings</a></li>
<li><a href="#">Back>></a></li>
</ul>
</nav>
<section>
<h1>Welcome to the management part of your site.</h1>
<section>
</div>
和 css 文件:
body {
margin: 0;
background-color: whitesmoke;
}
#PageWrapper {
width: 1000px;
margin: auto;
}
nav {
clear: both;
width: 100%;
float:left;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
}
ul#navMenu {
padding:0px;
margin:auto;
list-style: none;
}
ul#navMenu ul {
position: absolute;
left: 0;
top: 100%;
display: none;
padding: 0px;
margin: 0px;
}
ul#navMenu li {
display: inline;
float: left;
position: relative;
}
ul#navMenu a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
text-transform:uppercase;
text-decoration: none;
padding: 10px 0px;
width: 150px;
background: #666666;
color: #ffffff;
float: left;
text-align: center;
border-right: 1px solid #ffffff;
}
ul#navMenu a:hover {
background: #cccccc;
color: #333333;
}
ul#navMenu li:hover ul {
display: block;
}
ul#navMenu ul a {
width: 150px;
}
ul#navMenu ul li {
display: block;
margin: 0px;
}
我试图在浏览器开发工具中寻找不需要的边距，但我没有看到任何明显的东西。
最佳答案
从 nav 中删除 float 和 clear 并替换为 overflow:hidden 以包含应用于的 float 底层 li 菜单项。
这会强制 nav 进入一个新的 block formatting context , 这将按预期显示。
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}
关于添加内容时 HTML 菜单向下移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25263838/