display:inline-block列表布局

 使用浮动进行列表布局时，需对每个li设定高度，否则当内容高度不一时容易产生错位。使用display:inline-block进行列表布局时，无需设定固定高度，一行的高度以其中最大高度项为准，根据内容的不同，各行的高度可能不一样。

IE6和IE7不支持display:inline-block,可以设置display:inline，再设置zoom:1触发haslayout来解决。

样式：

ul,li{margin:0;padding:0;list-style:none;font-size:0;} li{display:inline-block;vertical-align:text-top;*display:inline;*zoom:1;font-size:14px;background-color:#CCCCCC;margin:2px 20px;width:200px;}

 

html代码：

<ul> <li>aaaaa</li> <li>1444br <br />ddd</li> <li>1444br <br />ddd <br />44</li> <li>aaaaa</li> <li>1444br <br />ddd</li> <li>1444br <br />ddd <br />44ddd <br />44</li> <li>aaaaa</li> <li>1444br <br />ddd</li> <li>1444br <br />ddd <br />44</li> <li>aaaaa</li> <li>1444br <br />ddd</li> <li>1444br <br />ddd <br />44</li> <li>aaaaa</li> <li>1444br <br />ddd</li> <li>1444br <br />ddd <br />44</li> <li>aaaaa</li> <li>1444br <br />ddd</li> <li>1444br <br />ddd <br />44</li> <li>aaaaa</li> <li>1444br <br />ddd</li> <li>1444br <br />ddd <br />44</li> </ul>

 

效果如下：