Question

这是导航栏的代码：

#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>

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

Answer 1

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

* {
margin:0;
padding:0;
}

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

Answer 2

尝试重置身体边缘，否则请向我们显示测试页：

body {margin:0;}

Answer 3

确保从body和html代码中移除边距和填充：

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

如果您还没有使用CSS重置，那么总是一个好主意。它将为您解决这个问题。

Answer 4

我想出来了，感谢你的帮助。

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

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

我将边距设置为零以外的其他内容。

Answer 5

如果这个

body {
margin: 0;
}

没有帮助，然后还有另一个css弄乱这些。

以下是jsFiddle

中的示例

为什么这个CSS导航栏不完全位于顶部？

5 个答案: