让li显示成一行,解决兼容问题


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>让li显示成一行,解决兼容问题</title>



<style>
.div1 li{display:inline-block;*display:inline;*zoom:1;width:100px;height:100px;background:#eee; margin-right:1px; }
</style>




<div class="div1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</div>




兼容性:<br />
IE6、IE7不识别inline-block但可以触发块元素。<br />
其它主流浏览器均支持inline-block。<br />
解决IE6、IE7兼容性的方法:<br />


1、首先设置inline-block触发块元素,具有了layout的特性,然后设置display:inline使块元素呈现内联元素,此时layout的特性不会消失。<br />

2、直接设置display:inline,使用zoom:1触发layout。<br />

兼容所有浏览器的方法是:<br />
display:inline-block;<br />
*display:inline;<br />
*zoom:1;<br />


程序运行结果如下,点击这里亲自运行看看