想必浮動布局大家都已經了解并熟練了，這是個栗子，你有一個好友列表:

用浮動布局挺正常對吧，萬一小李子的昵稱被搶注了，那只好用全稱 萊昂納多·迪卡普里奧，于是這個好友列表變成了這樣:

這是由于沒有給沒一個列表項給定固定寬高，所以發現布局亂套了有木有。那如果給定寬高，設置overflow:hidden（溢出隱藏），就會把名字截掉一半，小李子表示名字長怪我咯？怎么不說畢加索的名字呢。

因為開發的時候需要考慮到種種可能，如果把列表高度設置很高，一排好友列表的名字都是非常短一行可以顯示，那就又空余了很多，很難看。所以，這種列表布局才用浮動的方式顯然并不是最完美的解決方案。

今天介紹一種基于display:inline-block的方法來實現列表布局。對于這種高度不固定的列表布局有奇效。

HTML結構：

CSS樣式：

效果圖：

此時你發現列表之間多了些間距，怎么去掉？請參考上一篇文章：花樣去除inlien-block元素間距.

我們再改下CSS代碼，去除列表間距，給外面的UL標簽加上內邊距：

得到效果圖：

這時候你發現間距是沒了，可是還很多問題需要解決，第一個就是列表的頂部尚未對齊，第二個就是列表的水平等間距排列并沒有實現。

目前列表都是inline-block，所以我們給li加個vertical-align: top，讓他們頂部對齊。列表水平等間距排列，我們可以用text-align: justify，這個除了用在段落文本的兩端對齊之外，還可以巧用在這里哦（此處應該有掌聲）。部分代碼及效果圖如下：

第一排是不是兩端對齊了？那么問題來了，列表（或文字）要兩端對齊的前提就是內容必須超過一行，而且對最后一行還沒有效果。

要解決最后一行列表無法兩端對齊其實也很簡單，就是在列表的最后創建一個高度為0的寬度100%的透明的inline-block的標簽層就可以：

CSS樣式及效果圖如下：

這種布局在響應式或者移動端是非常友好的，可以隨著頁面大小的變化，自動變化布局，不信我隨意拖動一下預覽窗口大小，你們看下結果：

好了，還有更多好玩的，等著你們去發現。也歡迎私聊告訴我。