Question

我尽可能好地搜索，但我似乎无法找到答案，可能是我没有使用正确的关键字。

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

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

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

删除left: -5px; 然后再试一次

Answer 2

首先，当您使用position: absolute;

时，您不需要浮动

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

* {
   margin: 0;
   padding: 0;
}

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

Demo

Answer 3

只需删除您在left: -5px上添加的#nav http://jsfiddle.net/xBkma/4/

Answer 4

请尝试使用此代码：

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

大多数浏览器似乎在主体上都有一些填充和边距，因此将它们设置为零

Answer 5

您需要添加box-sizing：border-box;

喜欢这样

#nav {
width: 100%;
box-sizing: border-box;
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;
}

还添加body{padding: 0; margin: 0;}

工作小提琴http://jsfiddle.net/xBkma/8/

Answer 6

删除

位置：绝对

导航上的

。位置和浮动相互矛盾。

http://jsfiddle.net/xBkma/6/

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

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

Answer 7

您应该尝试删除nav元素中的margin-right和left属性，并设置边距为0的正文。

body{
 margin: 0;
}

导航栏不会完全覆盖屏幕

7 个答案: