在IE6中,把li左浮动后,在最右侧经常会出现竖直排列的情况,而在火狐浏览器中文字放不下了会自动换行。
CSS代码
*{ list-style:none; padding:0; margin:0; font-size:14px; } .sjyhome{ float:left; width:360px; padding-left:50px; } ul li{ float:left; padding:5px; }
HTML代码
<div> <ul> <li><a href="#">sjy之家</a></li> <li><a href="#">sjy之家</a></li> <li><a href="#">sjy之家</a></li> <li><a href="#">sjy之家</a></li> <li><a href="#">sjy之家</a></li> <li><a href="#">sjy之家</a></li> </ul> </div>
IE6浮动列表li最右侧竖直排列解决方案
方案一、只要给li增加white-space:nowrap;即可。
方案二、修改CSS代码
*{ list-style:none; padding:0; margin:0; font-size:14px; } .sjyhome{ float:left; width:410px; } ul{ padding-left:50px; } ul li{ float:left; padding:5px; }
CSS代码中标有颜色部分是更改项,再次测试,ie6和firefox中显示的结果一样了。
ie6确实存在这样一个问题,定义内边距的时候要提出来在一个单独的盒子里定义,所以我给ul定义了左内边距为50px 而没有在.sjyhome盒子里定义 就是多加一个盒子 单独定义这个内边距。