在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盒子里定义 就是多加一个盒子 单独定义这个内边距。

