html - 如何使固定导航与窗口顶部齐平

Question

我在页面顶部的固定导航栏上遇到了一些问题。它应该与页面顶部齐平，但不是。这是我的 HTML:

<nav>
<a href="#">
<div id="logo">
lorem
</div></a>
</nav>

<ul>
*enough li's to go past the bottom of the screen*
</ul>

和我的 CSS:

body {
    margin: 0px;
    padding: 0px;
}

nav {
    position: fixed;
    display: block;
    color: white;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 60px;
    background-color: #4d4d4d;
}

#logo {
    padding-left: 1%;
    padding-right: 1%;
    color: #75cc83;
    width: 180px;
    height: 100%;
    background-color: #333333;
    font-size: 3em;
    font-family: candara, sans-serif;

}

一旦我将内容放入其中(在本例中为列表项)，固定导航似乎只有问题

Answer 1

将 top:0 添加到您的导航规则中:

nav {
    position: fixed;
    display: block;
    color: white;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 60px;
    background-color: #4d4d4d;
    top:0;
}

jsFiddle example