I'm trying to write a simple menu for my site's backend. I'd like to acomplish that there is no space between the menu an the top of my site. It looks ok until I add a <h> or <p> element. The menu moves about 30px down. Why is it happening and how can I fix it?
我正在尝试为我的网站的后端编写一个简单的菜单。我想知道我的网站顶部的菜单之间没有空格。在添加
元素之前,它看起来没问题。菜单向下移动约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>
And the css file:
和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;
}
I tried to look for unwanted margins in browser developer tools but I haven't seen anything obvious.
我试图在浏览器开发者工具中寻找不需要的边距,但我没有看到任何明显的东西。
1 个解决方案
#1
1
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
从导航中删除浮动并清除并替换为overflow:hidden以包含应用于基础li菜单项的浮动。
This forces the nav into a new block formatting context, which will display as anticipated.
这会强制导航进入新的块格式化上下文,该上下文将按预期显示。
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}
#1
1
Remove the float and clear from nav and replace with overflow:hidden to contain the floats applied to the underlying li menu items.
从导航中删除浮动并清除并替换为overflow:hidden以包含应用于基础li菜单项的浮动。
This forces the nav into a new block formatting context, which will display as anticipated.
这会强制导航进入新的块格式化上下文,该上下文将按预期显示。
Demo Fiddle
nav {
width: 100%;
margin-bottom:30px;
margin-top:0px;
background-color:#666666;
overflow:hidden;
}