dispaly:inline-block

为了达到如下图所示的效果：有三种方案：

1）float：left;

2）display:table-cell;

3）display:inline-block;



第一种方案：

弊端：1）父元素清除浮动2）最关键的是：不支持不等高的排列：



所以：如果是高度确定的元素可以通过这样的方式来排列；

第二种方案：dispaly:table-cell;对于用很多li元素的情况，不适用；所有的li会充当每一个单元格，会在一排显示不会自动换行；除非人为的分行显示；


3、display：inline-block；

显示的效果就是一开始的样子；

这里提一下display：inline-block的兼容性问题：

IE6、IE7不识别inline-block但可以触发块元素。

其它主流浏览器均支持inline-block。

display:inline-block;

*display:inline;

*zoom:1;