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

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

1 个答案: