我在html中尝试了一些div,通常这不是问题。然而,我遇到了一个问题,我没有发现我的错误。
菜单div应该在标题div的中心,顶部不应该有空白。
以下是出现错误的示例:http://jsfiddle.net/j83eb/
这是html:
<div id="header">
<div id="menu">
<ul>
<li><a class="nav-element" href="#">News</a></li>
<li><a class="nav-element" href="#">Turnier</a></li>
<li><a class="nav-element" href="#">Ergebnisse</a></li>
<li><a class="nav-element" href="#">Impressionen</a></li>
<li><a class="nav-element" href="#">Anmeldung</a></li>
<li><a class="nav-element" href="#">Impressum</a></li>
</ul>
</div>
</div>
和css:
#header {
padding: 0;
margin:0;
background: #003399;
width: 100%;
height: 50px;
display: block;
position: fixed;
top: 0;
left: 0;
}
#menu a {
display: block;
width: 150px;
height: 50px;
}
#menu {
padding:0;
margin-right:auto;
margin-left:auto;
line-height:50px;
width: 950px;
height: 50px;
}
#menu ul li {
display: block;
width: 150px;
height: 50px;
float: left;
text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 16px;
font-weight: normal;
list-style: none;
margin:0;
paddin:0;
line-height:50px;
}
.nav-element:link {
color: #FFF;
text-decoration: none;
}
.nav-element:visited {
color: #FFF;
text-decoration: none;
background: #81b4e3;
}
.nav-element:hover {
text-decoration: none;
color: #FFF;
text-decoration: none;
background: #1a589d;
}
.nav-element:active {
color: #FFF;
text-decoration: none;
background: #C00;
}
谢谢!
下面将修复它(从ul
中删除边距/填充)
#menu ul {
margin:0;
padding:0;
}
Fiddle
如上所述,您需要清除<ul>
元素上的默认边距。(不需要清除填充,没有)。我还删除了所有内容的高度和线条高度,因为这不是必要的,而且可能只会在未来造成问题。
此外,在发送CSS寻求帮助之前,一定要仔细查看它。有许多属性存在打字错误和重复属性。
http://jsfiddle.net/j83eb/3/