先上代码:
<div id="content" style=" width:750px; height:300px; background:#C29A29; margin-top:100px; margin-left:150px;">
<ul class="clearfloat" style="border-top:#630 solid 2px; border-bottom:#630 solid 2px; padding:2px 0 2px 0; margin-top:10px;">
<li class="contentNav" ><a href="">我是张三</a></li>
<li class="contentNav" ><a href="">我是李四</a></li>
<li class="contentNav" ><a href="">那我只能是王五了</a></li>
</ul>
</div>
要实现的效果是一个大概居中的div里面一排导航,给ul的margin-top不论怎么设置都是无效,百度之:
两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
1.两个或多个
说明其数量必须是大于一个,又说明,折叠是元素与元素间相互的行为,不存在 A 和 B 折叠,B 没有和 A 折叠的现象。
2.毗邻
是指没有被非空内容、padding、border 或 clear 分隔开,说明其位置关系。
注意一点,在没有被分隔开的情况下,一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻; 只有在一个元素的 height 是 "auto" 的情况 下,它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。
3.垂直方向
是指具体的方位,只有垂直方向的 margin 才会折叠,也就是说,水平方向的 margin 不会发生折叠的现象。
这里感谢前端攻城狮丁小倪在那啥上的回答,不过本人不认识他,估计也@不到,就算了。
解决方法:
茴香豆有几种写法忘了,这个据说有四种方法,晓得一种就行,其他的可能会坑。
给父级元素加:overflow:hidden
margin-top无效的解决方法的更多相关文章
-
关于苹果iPhone手机对页面margin属性无效的解决方法一(如有错误,请留言批评)
这个问题,是在给商城网站底部footer设置margin属性的时候发现的,先把出现问题的截图发出来看一下 安卓手机,打开正常 iphone6 p 打开出现的问题(无视margin-bottom:6 ...
-
设置height:100%无效的解决方法
设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...
-
WPF:指定的命名连接在配置中找不到、非计划用于 EntityClient 提供程序或者无效的解决方法
文/嶽永鹏 WPF 数据绑定中绑定到ENTITY,如果把数据文件做成一个类库,在UI文件中去应用它,可能遇到下面这种情况. 指定的命名连接在配置中找不到.非计划用于 EntityClient 提供程序 ...
-
移动端bug~~移动端:active伪类无效的解决方法【移动端 :active样式无效】
移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26 15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...
-
js中style.display=";";无效的解决方法
本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...
-
redhat linux enterprise 5 输入ifconfig无效的解决方法
redhat linux enterprise 5 输入ifconfig无效的解决方法 在安装完成linux后,进入终端,输入命令行ifconfig,会提示bash: ifconfig: comm ...
-
排错-安装SQl&#160;2008“为SQL&#160;Server代理服务提供的凭据无效的解决方法
安装SQl 2008“为SQL Server代理服务提供的凭据无效的解决方法 by:授客 QQ:1033553122 在Windows Server 2008安装SQL Server 2008出现的问 ...
-
Node.js中针对中文的查找和替换无效的解决方法
Node.js中针对中文的查找和替换无效的解决方法. //tags的值: tag,测试,帖子 var pos1 = tags.indexOf("测"); //这里返回-1 ta ...
-
QWidget子窗口中setStyleSheet无效,解决方法
继承 QWidget setStyleSheet无效,解决方法. 发现 继承自QWidget的自定义类 ,使用setStyleSheet无效, 如果删除头文件中的 Q_OBJECT,setStyleS ...
-
表格Table宽度设置无效的解决方法
表格Table宽度设置无效的解决方法 bootstrap中使用table时发现不管用width赋值方式都无法改变table>td的宽度 解决方法: 设置table:table-layout:fi ...
随机推荐
-
Struts Upload上传文件
1.Unable to find 'struts.multipart.saveDir' property setting. Defaulting to javax.servlet.context.te ...
-
Servlet&;jsp基础:第五部分
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
-
VS2013中修改.dll工程项目的.lib和.dll的输出路径
一个dll工程,生成的两个东西是我们需要的:.lib和.dll,在实际开发过程中我们往往希望这两个东西直接输出到特定文件夹,对于这两个的修改: 设置好之后,对于调用该dll的exe工程,将exe的输出 ...
-
凸包模板 POJ1873
// 凸包模板 POJ1873 // n=15所以可以按位枚举求凸包,再记录数据 #include <iostream> #include <cstdio> #include ...
-
use worker without js file
var blob = new Blob(['onmessage=function(e){postMessage(e.data);}']); debugger; // Obtain a blob URL ...
-
QLGame 2d Engine SpriteBatch类创建
GitHub地址:https://github.com/wsgzxl/QLGame2dEngine 今天说五个问题: 1.前面说到的 颜色不对的问题,是因为FreeImage读取出来的数据格式与Ope ...
-
201521123063 《Java程序设计》 第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图.Onenote或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 1.1 建立数据库test.表students. ...
-
JAVA调用WCF
Java环境下生成代理类的工具有很多,如wsdl2Java,wsimport 等.本文中使用的工具是wsimport. 1.wsdl2Java 生成命令实例: wsdl2Java -p package ...
-
linux上的组管理
上一次我们谈了CentOS上的用户管理,现在我们再来谈下CentOS上的用户组管理. groupadd创建一个新的组 用法如下: groupadd [选项] groupname 常用选项: -f 强制 ...
-
UI自动化(三)css优先级
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...