html - 修复了带 float 的导航栏、下拉菜单、左右边距不正确

标签 html css

我在页面顶部有一个固定的导航栏。

内部是一些 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/

相关文章:

javascript - JQuery SlideToggle 向下滑动,然后向上滑动以覆盖内容

html - Sprite 背景图像的最佳方法,具有 SEO

css - chardinjs 不能在 ruby​​ on rails 中工作

html - Bootstrap Glyphicons 不会显示,除非所有文件都在根目录中

html - 无法让剪辑路径与外部 svg 一起使用

javascript - meteor 向现有集合添加新数据

php - 如何在特定日期用 PHP 和 MySQL 发送邮件?

javascript - 如何将html标签放入文本节点

css - 平滑淡出过渡不起作用

html - 如何切换两个不同的图像?