0

我用 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;
}

谢谢！

4

2 回答 2

1

下面将修复它（从 中删除边距/填充ul）

#menu ul {
    margin:0;
    padding:0;
}

和小提琴

于 2013-08-07T21:30:16.487 回答
0

如上所述，您需要清除<ul>元素的默认边距。（无需清除填充，没有）。我还从所有内容中删除了高度和行高，因为这不是必需的，并且可能只会在未来引起问题。

此外，请确保在发送 CSS 以寻求帮助之前查看您的 CSS。有许多属性有错别字以及重复的属性。

http://jsfiddle.net/j83eb/3/

于 2013-08-07T21:39:44.500 回答