固定导航栏浮动，下拉菜单，左右页边距不正确

里面是一些浮动的divs，包含链接，当点击切换隐藏的内容，使用jQuery滑动主内容。

一切正常，但由于某种原因，我无法得到下拉菜单或内容打到边界0的左侧和右侧。

这里的工作fiddle

这里是CSS：

.wrapper { width: 100%; margin:0;padding:0;} 
.topnav {width:100%;height:50px;position: fixed; top:0;background:yellow;left:0;} 
.div1 {float:left;width:50px;background:blue;height:50px;} 
.div2 {float:left;height:50px;background:orange;} 
.div3 {float:right;width:50px;background:red;height:50px;text-align:center;} 
.div4 {float:right;width:50px;background:black;height:50px;} 

.link {margin:0.2rem;} 

.dropdown {display:none;width:100%;background:black;color:white;} 
.umenu {display:none;width:100%;background:black;color:white;} 

.clear {clear:both;} 

p {padding:10px 0 10px 0} 

.content {margin-top:50px;background:teal;}

我不会打扰张贴HTML和jQuery，因为我敢肯定，这是严格意义上的CSS问题，但它是所有在那里的小提琴。

来源

2016-03-03 Grant

如果我能理解你想要的下拉内容具有相同的尺寸为顶部的菜单，是正确的？ – goncalopinto

白痴......我没有在小提琴中设置身体边距为0。

现在工作！

我会把它留在这里，除非有人认为它有用。

来源

2016-03-03 00:32:04 Grant

这是一种替代解决方案。

您可以更改position:realtive

.content {margin-top:50px;background:teal;margin-top:-15px;} /*MODIFICATION*/ 

.topnav {width:100%;height:50px;position: relative; top:0;background:yellow;left:0;} /* MODIFICATION*/

这里的小提琴：https://jsfiddle.net/L6zk25m5/4/

来源

2016-03-03 00:36:11 AVI

固定导航栏浮动，下拉菜单，左右页边距不正确

回答

相关问题