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

html结构如下：

xhtml代码

<ul>

<li><a href="category.php?id=7">考研英语</a></li>

<li><a href="category.php?id=8">考研数学</a></li>

<li><a href="category.php?id=9">考研政治</a></li>

<li><a href="category.php?id=10">统考专业课试题</a></li>

</ul>

一开始写的css如下：

xhtml代码

<style type="text/css">

ul { clear:both; margin:0 15px 0 25px;}

ul li {height:20px; float:left; width:auto; margin-left:5px;}

</style>

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



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

xhtml代码

ul { clear:both; margin:0 15px 0 25px;}

ul li {display: inline-block;overflow: hidden;white-space: nowrap; height:20px; float:left; width:auto; margin-left:5px;}

完美解决问题。