先上代码:
<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