解决IE6,ie7下元素左浮动自动换行的问题

html结构如下:

xhtml代码
  1. <ul> 
  2. <li><a href="category.php?id=7">考研英语</a></li> 
  3. <li><a href="category.php?id=8">考研数学</a></li> 
  4. <li><a href="category.php?id=9">考研政治</a></li> 
  5. <li><a href="category.php?id=10">统考专业课试题</a></li> 
  6. </ul> 

一开始写的css如下:

xhtml代码
  1. <style type="text/css"> 
  2. ul { clear:both; margin:0 15px 0 25px;} 
  3. ul li {height:20px; float:left; width:auto; margin-left:5px;} 
  4. </style> 

FF和IE8正常,但在IE6就悲催了...

ie6左浮动换行

解决方法:自适应宽度的左浮动元素加上display: inline-block;overflow: hidden;white-space: nowrap;

xhtml代码
  1. ul { clear:both; margin:0 15px 0 25px;} 
  2. ul li {display: inline-block;overflow: hidden;white-space: nowrap; height:20px; float:left; width:auto; margin-left:5px;} 

完美解决问题。

posted @ 2015-01-21 13:21  梓色心晴  Views(354)  Comments(0)    收藏  举报