爲什麼要用display:inline-block;
(1)float:left;
浮動佈局有侷限性，就是每個列表元素的高度必須一致，否則就會錯開。
(2)display:inline-block;
具有對內部元素的包裹性，可與文字，圖片混排，可內嵌block屬性元素。
浮動佈局的侷限
浮動佈局就是指通過使用float屬性，讓列表元素依次排列的佈局。浮動局部的侷限性，就是每個列表元素的高度必須要一致，否則就會像是俄羅斯方塊一樣，“鋸齒相錯”，例如一個左浮動列表佈局，如果第一行有個列表高度高於其他列表，那就在第二行，第一個元素會沿着最高元素的右側對齊，此原因是屬於惡魔系的float屬性破壞了inline box。
另外一種佈局方式display:inline-block;
（1）display:inline-block;的解釋
display:inline-block感覺與display:table-cell有些相似，例如對內部元素的包裹性。但是，由於display:inline-block最大的不同就是其沒有父元素的匿名包裹特性，這使得display:inline-block屬性的使用非常自由，可與文字，圖片混排，可內嵌block屬性元素，可以可以置身於inline水平的元素中。
inline-block屬性的元素適用於inline box模型，所以，當其中的列表元素高度不一時，是不會有錯位的。一言以蔽之，就是每一行所有的inline元素和inline-block元素會共同形成一個line boxes，這個line box的高度由裏面最高的元素決定。所以，即使inline-block屬性的列表元素高度異常，撐開的是整個line boxes的高度，因而，不會與下一行的列表元素髮生錯位。
（2）display:inline-block;的使用
如果是inline水平的元素（如a標籤，span標籤之類）跟上面一樣，直接：
{display:inline-block;}如果是block水平的元素，例如li標籤。則需要多點代碼，目前我知道的方法有兩個，如下所示：
li {display:inline-block;...}
li {display:inline;}或者是
li{display:inline; zoom:1;}（3）display:inline-block;的使用中可能存在的問題
inline-block元素間的換行符空格間隙問題如果inline-block元素間有空格或是換行產生了間隙，那是正常的，應該的。如果沒有空格與間隙纔是不正常的（IE6/7 block水平元素）。真正的inline-block元素，就像個圖片一樣。例如，兩個不在一行的img標籤，形成的兩個圖片之間就會有間隙。
要讓這些空格不出現，最簡單的最容易理解的就是讓列表的結束標籤與下一個列表的開始標籤連在一起，就像是：
<li>
<span>...</span>
</li><li>
<span>...</span>
</li>其他解決辦法：
{font-size:0;} //設置父對象的文字大小爲0px,Chrome下的空格對於font-size:0不起作用{letter-spaceing:-4px;} //控制文字間的水平距離，支持負值，讓文字水平方向上重疊。##如果元素間本身沒有空格##，使用letter-spacing屬性是不會發生水平重疊問題的。{text-align:justify;} //可實現自動等寬水平排列的列表佈局，兩端對齊的，不需計算寬度，瀏覽器自動案例
<style>
.box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;}
.list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}
</style>
<div class="box">
<span class="list"><img data-src="http://image1.jpg" />
哇哦，美女，口水，鼻血~~~</span>
<span class="list"><img data-src="http://image2.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔亂撞~~</span>
</div>總結：
» block水平的元素inline-block化後，IE6/7沒有換行符間隙問題，其他瀏覽器均有；
» inline水平的元素inline-block後，所有主流瀏覽器都有換行符/空格間隙問題；
» font-size:0，去除換行符間隙，在IE6/7下殘留1像素間隙，Chrome瀏覽器無效，其他瀏覽器都完美去除；
» letter-spacing負值可以去除所有瀏覽器的換行符間隙，但是，Opera瀏覽器下極限是間隙1像素，0像素會反彈，換行符間隙還原。所以，應用display:inline-block屬性實現列表佈局的幾個關鍵字就是：block水平的標籤，font-size:0和letter-spacing負值。