最終效果圖如下：

（我寫兩個ul的原因是li只有一排和多排效果會不一樣）

首先看我的寫法，HTML很簡單，就不貼了，只貼CSS代碼，DEMO：

ul{overflow:hidden;zoom:1;background:#ddd;width:440px;margin-bottom:50px;margin-left:auto;margin-right:auto}li{float:left;display:inline;width:100px;height:100px;line-height:100px;text-align:center;margin:0 5px 10px;background:#aaa;}

大家可以打開上面的DEMO看效果，IE8、Chrome、FF都沒問題，IE6效果如下：

這里就可以看出來，一排li和多排li效果不一樣的，一個有底部一個沒底部。

IE7效果如下：

IE7直接都沒底部了。

在CSS群里討論了大半天的時間，網友提出各種各樣的方法，最后一位叫朵斯提的朋友，他的方法可以說是完美解決吧。DEMO

他的解決方法是在ul外面加div，然后把一直習慣li左右下邊距改為上左右邊距。上面多出來的邊距用div隱藏，然后ul向上負邊距，把上面多余的徹底蓋住。基本思路就是這樣，聽不懂我說的可以看看核心CSS代碼：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表