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

老黎 发表于 2011-12-03 15:23:49

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;} 

完美解决问题。

阅读全部内容…

Tags: css

老黎的聚宝盘(PHP) 没有评论
Loading
归档
订阅RSS