当前位置:Gxlcms > html代码 > ulli横排(float:left)ie6多出间距_html/css_WEB-ITnose

ulli横排(float:left)ie6多出间距_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:8人阅读

  1. <style type="text/css">
  2. .list{width:700px; overflow:hidden; border:solid 1px blue; padding:20px; }
  3. ul,li {margin:0; padding:0; list-style:none}
  4. ul{border:solid 1px green; display:inline-block; background:#d5d5d5; width:100%;}
  5. li{width:250px; height:150px; border:solid 1px red; float:left; margin:15px 0 15px 50px;}</style><title>无标题文档</title><div class="list">
  6. <ul>
  7. <li>dsdddddddddddddddddddddd</li>
  8. <li>dsdddddddddddddddddddddd</li>
  9. <li>dsdddddddddddddddddddddd</li>
  10. <li>dsdddddddddddddddddddddd</li>
  11. <li>dsdddddddddddddddddddddd</li>
  12. </ul>
  13. <div style="clear:both"></div></div>


li通过float:left 横排后,ie6中所有的li会距离ul内左边多一倍左右的距离,怎么消除??


回复讨论(解决方案)

给li设置一个display:inline

或者不使用margin,使用padding代替。再或者,不使用浮动。使用inline-block布局。

可以搜索:IE6双外边距的bug,查看一下相关的内容。

因为浮动ie6会产生双倍bug,给ie6加个_display:inline

.list{width:700px; overflow:hidden; border:solid 1px blue; padding:20px; }

去掉你的padding

人气教程排行