导航栏将不会完全覆盖屏幕
我已经尽力搜索周围,但我似乎无法找到答案,可能是我没有使用正确的关键字。导航栏将不会完全覆盖屏幕
无论如何,我做了一个简单的导航栏,并把它放到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>
所有你不需要浮动首先,当您使用position: absolute;
二来你的导航,首先你需要重新设置浏览器默认样式表,你可以简单地使用这个
* {
margin: 0;
padding: 0;
}
后来从#nav
改变left: -5px;
到left: 0;
,你是好去
谢谢!它修复了它,也感谢信息。我在这方面还很新。 – user2168765 2013-04-11 13:55:34
@ user2168765欢迎您:) – 2013-04-11 13:57:27
当然,您是我看到的第一个解决它的人。我猜这个错误是由我使用'position:absolute;'和float两个引起的? – user2168765 2013-04-11 14:00:12
加入试试这个代码,而不是:
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
谢谢!它修复了它。 – 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;}
删除
导航上的位置:绝对
。位置和浮动相互矛盾。
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;
}
你应该尝试用保证金0
body{
margin: 0;
}
您正在通过'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