0

这是导航栏的代码：

#nav {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;  }
#nav ul {
    list-style: none;
    width: 800px;
    margin: 0 auto;
    padding: 0; }
#nav li {
    float: left; }
#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc; }
#nav li:first-child a {
    border-left: 1px solid #ccc; }
#nav li a:hover {
    color: #c00;
    background-color: #fff; }

根据要求，这是导航栏的 HTML：

<div id="nav">
    <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Our Products</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Login</a></li>
    </ul>
</div>

由于填充为零，这不应该使它完全位于顶部吗？我是网页设计的新手......非常感谢所有帮助。

4

5 回答 5

4

确保您已在样式表顶部进行了重置，以避免浏览器默认设置。

* {
margin:0;
padding:0;
}

您可能会在网络上找到其他重置片段，但仅此一项就应该有所帮助。

于 2013-06-21T15:32:28.503 回答
2

尝试重置正文边距，否则向我们展示测试页面：

body {margin:0;}
于 2013-06-21T15:31:02.177 回答
0

我想通了，但感谢您的帮助。

问题出在我没有发布的这段代码中：

div.content{
        border: 1px solid #fbfbfb;
        background-color: #fff;
        max-width: 640px;
        width: 100%;
        padding: 2%;
        margin: 0px  auto;
    }

我将边距设置为除零以外的其他值。

于 2013-06-21T15:44:02.977 回答
0

如果这

body {
margin: 0;
}

没有帮助，然后还有另一个 CSS 搞砸了这些。

这是jsFiddle中的示例

于 2013-06-21T15:52:55.967 回答
0

body确保从andhtml标签中删除边距和填充：

html, body { margin: 0; padding: 0 }

如果您还没有使用 CSS 重置，则始终是一个好主意。它会为你解决这个问题。

于 2013-06-21T15:30:50.177 回答