想必浮動(dòng)布局大家都已經(jīng)了解并熟練了，這是個(gè)栗子，你有一個(gè)好友列表:
用浮動(dòng)布局挺正常對(duì)吧，萬一小李子的昵稱被搶注了，那只好用全稱 萊昂納多·迪卡普里奧，于是這個(gè)好友列表變成了這樣:
這是由于沒有給沒一個(gè)列表項(xiàng)給定固定寬高，所以發(fā)現(xiàn)布局亂套了有木有。那如果給定寬高，設(shè)置overflow:hidden（溢出隱藏），就會(huì)把名字截掉一半，小李子表示名字長怪我咯？怎么不說畢加索的名字呢。
因?yàn)殚_發(fā)的時(shí)候需要考慮到種種可能，如果把列表高度設(shè)置很高，一排好友列表的名字都是非常短一行可以顯示，那就又空余了很多，很難看。所以，這種列表布局才用浮動(dòng)的方式顯然并不是最完美的解決方案。
今天介紹一種基于display:inline-block的方法來實(shí)現(xiàn)列表布局。對(duì)于這種高度不固定的列表布局有奇效。
HTML結(jié)構(gòu)：
CSS樣式：
效果圖：
此時(shí)你發(fā)現(xiàn)列表之間多了些間距，怎么去掉？請(qǐng)參考上一篇文章：花樣去除inlien-block元素間距.
我們?cè)俑南翪SS代碼，去除列表間距，給外面的UL標(biāo)簽加上內(nèi)邊距：
得到效果圖：
這時(shí)候你發(fā)現(xiàn)間距是沒了，可是還很多問題需要解決，第一個(gè)就是列表的頂部尚未對(duì)齊，第二個(gè)就是列表的水平等間距排列并沒有實(shí)現(xiàn)。
目前列表都是inline-block，所以我們給li加個(gè)vertical-align: top，讓他們頂部對(duì)齊。列表水平等間距排列，我們可以用text-align: justify，這個(gè)除了用在段落文本的兩端對(duì)齊之外，還可以巧用在這里哦（此處應(yīng)該有掌聲）。部分代碼及效果圖如下：
第一排是不是兩端對(duì)齊了？那么問題來了，列表（或文字）要兩端對(duì)齊的前提就是內(nèi)容必須超過一行，而且對(duì)最后一行還沒有效果。
要解決最后一行列表無法兩端對(duì)齊其實(shí)也很簡單，就是在列表的最后創(chuàng)建一個(gè)高度為0的寬度100%的透明的inline-block的標(biāo)簽層就可以：
CSS樣式及效果圖如下：
這種布局在響應(yīng)式或者移動(dòng)端是非常友好的，可以隨著頁面大小的變化，自動(dòng)變化布局，不信我隨意拖動(dòng)一下預(yù)覽窗口大小，你們看下結(jié)果：
好了，還有更多好玩的，等著你們?nèi)グl(fā)現(xiàn)。也歡迎私聊告訴我。
