导航栏将不会完全覆盖屏幕

我已经尽力搜索周围，但我似乎无法找到答案，可能是我没有使用正确的关键字。导航栏将不会完全覆盖屏幕

无论如何，我做了一个简单的导航栏，并把它放到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>

来源

2013-04-11 user2168765

您正在通过'5px的离开了酒吧除去导航元素的保证金右侧和左侧的属性和定身'，因此在右侧创建了一个5px的空白。什么是“left：-5px”？ – andyb 2013-04-11 13:51:08

正如我告诉裁缝，如果我删除左侧5像素，左侧出现同样的问题。 – user2168765 2013-04-11 13:53:04

这是由于''上的浏览器默认边距造成的。将其设置为'margin：0'并完全移除所有负面定位。（也是我在你的答案评论前写下了我的评论！） – andyb 2013-04-11 13:54:05

所有你不需要浮动首先，当您使用position: absolute;

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

* { 
    margin: 0; 
    padding: 0; 
}

后来从#nav改变left: -5px;到left: 0;，你是好去

Demo

来源

2013-04-11 13:51:37

谢谢！它修复了它，也感谢信息。我在这方面还很新。 – user2168765 2013-04-11 13:55:34

@ user2168765欢迎您:) – 2013-04-11 13:57:27

当然，您是我看到的第一个解决它的人。我猜这个错误是由我使用'position：absolute;'和float两个引起的？ – user2168765 2013-04-11 14:00:12

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

来源

2013-04-11 13:51:21

如果我删除'left-5px;'我在左边得到同样的问题。 – user2168765 2013-04-11 13:52:30

只需卸下left: -5px你#nav http://jsfiddle.net/xBkma/4/

来源

2013-04-11 13:51:58 davids

加入试试这个代码，而不是：

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

大多数浏览器似乎有一些对身体填充和利润率所以其设置为0

来源

2013-04-11 13:52:30 Andrew

谢谢！它修复了它。 – user2168765 2013-04-11 13:54:46

很高兴帮助。一些浏览器喜欢为身体或其他物品提供一些隐藏的填充和边距。最好是通过删除填充和边距来启动您的CSS重置 – Andrew 2013-04-11 14:00:36

您需要添加框尺寸：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-11 13:53:58

删除

位置：绝对

导航上的

。位置和浮动相互矛盾。

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-11 13:54:03

你应该尝试用保证金0

body{ 
margin: 0; 
}

来源

2013-04-11 13:54:59

导航栏将不会完全覆盖屏幕

回答

相关问题