0

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

无论如何，我制作了一个简单的导航栏并将其设置为 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>
4

7 回答 7

0

您需要添加 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/

于 2013-04-11T13:53:58.277 回答
0

消除

位置：绝对

在导航上。位置和浮动相互矛盾。

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;
}
于 2013-04-11T13:54:03.230 回答
0

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

body{
 margin: 0;
}
于 2013-04-11T13:54:59.993 回答
0

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

于 2013-04-11T13:51:21.457 回答
0

首先，您在使用时不需要浮动position: absolute;

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

* {
   margin: 0;
   padding: 0;
}

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

演示

于 2013-04-11T13:51:37.860 回答
0

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

于 2013-04-11T13:51:58.063 回答
0

试试这个代码：

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;
    }

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

于 2013-04-11T13:52:30.340 回答