今天做一个网站时,首页即将收尾,做到了导航菜单模块,但是在实现子元素UL距离父元素div#links时,遇到了 margin-top设置无效的现象。
html代码:
<div id="links">
<ul>
<li><a href=http://www.90focus.com>90focus前端技术学习</a></li>
<li><a href=http://www.90focus.com>90focus前端技术学习</a></li>
...
<div class="clear"></div>
</ul>
</div>
CSS代码:
#links{height:105px; background:url(../images/linkbg.gif) no-repeat; margin-top:10px;}
#links ul{ display:block; width:905px; margin-left:40px; margin-top:10px;}
#links ul li{ display:inline-block; width:100px; text-align:center; line-height:30px; float:left}
但是发现无论怎样修改ul的margin数制都没有作用,在网上查了一下原因,有人说是“margin叠加bug”。有几个解决方法:
1.在父元素加上有意义的border数值(0,none无效)
2.在父级内部的添加上、下两个空元素
3.在父级元素加: float:left; (clear:both;)
4.在父级元素加:overflow:hidden;
我个人觉得还是第四种比较好,1、2种方法有点不伦不类的,第三种浮动吧,做不好还有“后遗症”,所以加上overflow:hidden;比较保险。