基于各位前輩的辛勤勞動，下面得出使用inline-block替換float:left;的最佳方案。

html代碼

<div class="list"><ul><li><img src="images/pic02.jpg" alt=""></li><li><img src="images/pic02.jpg" alt=""></li><li><img src="images/pic02.jpg" alt=""></li><li><img src="images/pic02.jpg" alt=""></li><li><img src="images/pic02.jpg" alt=""></li><li><img src="images/pic02.jpg" alt=""></li></ul> </div>

css代碼(來自taobaoued)

.list { font-size:0;/* 所有瀏覽器 */ *word-spacing:-1px;/* IE6、7 */ } .list ul li{ font-size: 12px; letter-spacing: normal; word-spacing: normal; vertical-align:top; display: inline-block; *display:inline; *zoom:1; } @media screen and (-webkit-min-device-pixel-ratio:0){ /* firefox 中 letter-spacing 會導致脫離普通流的元素水平位移 */ .list{ letter-spacing:-5px;/* Safari 等不支持字體大小為 0 的瀏覽器, N 根據(jù)父級字體調(diào)節(jié)*/ } }

最終效果圖完美兼容

總結(jié)

以上是生活随笔為你收集整理的inline-block代替浮动布局float:left列表布局最佳方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。