margin-top无效的解决方法

先上代码:

margin-top无效的解决方法
        <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>
margin-top无效的解决方法


要实现的效果是一个大概居中的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无效的解决方法

上一篇:介绍一位不太熟的老友:Android Studio Assistant


下一篇:一款可以让你开发效率提高10倍的DIY神器