html - 导航栏不会完全覆盖屏幕

Question

我已经尽可能地搜索了，但我似乎找不到答案，可能是我没有使用正确的关键字。

无论如何，我制作了一个简单的导航栏并将其设置为 100% 宽度，但它不会覆盖屏幕的最右侧部分。我尝试使用 right:-5px;但它没有帮助。

这是 jsfiddle，所以你可以看到我的代码。

http://jsfiddle.net/xBkma/

CSS:

 #nav {
width: 100%;
float: left;
margin: 0 0 0 0;
padding: 0;
background-color: #F3B33C;
border-bottom: 4px solid #ccc;
position: absolute;
top: -1px;
left: -5px;
margin-right: -5px;
}

HTML

<div id="nav">
    <ul>
    <li><a id="home" href="index.html"> <img src="images/black home.png" width="28" height="28"></a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Database</a></li>
    </ul>
    </div>

Answer 1

首先，当您使用 position: absolute;

时，您不需要 float

其次是你的导航，首先你需要重置浏览器的默认样式表，你可以简单地使用这个

* {
   margin: 0;
   padding: 0;
}

稍后将 left: -5px; 从 #nav 更改为 left: 0; 就可以了

Demo