我在页面顶部有一个固定的导航栏。
内部是一些 float 的 div,其中包含链接,单击这些链接会切换隐藏的内容,这些内容会使用 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 问题,但它都在 fiddle 中。
最佳答案
这是另一种解决方案。
您可以更改position:relative
.content {margin-top:50px;background:teal;margin-top:-15px;} /*MODIFICATION*/
.topnav {width:100%;height:50px;position: relative; top:0;background:yellow;left:0;} /* MODIFICATION*/
这是 fiddle :https://jsfiddle.net/L6zk25m5/4/
关于html - 修复了带 float 的导航栏、下拉菜单、左右边距不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35760902/