想必浮動(dòng)布局大家都已經(jīng)了解并熟練了，這是個(gè)栗子，你有一個(gè)好友列表:
用浮動(dòng)布局挺正常對吧，萬一小李子的昵稱被搶注了褪迟，那只好用全稱 萊昂納多·迪卡普里奧，于是這個(gè)好友列表變成了這樣:
這是由于沒有給沒一個(gè)列表項(xiàng)給定固定寬高答憔，所以發(fā)現(xiàn)布局亂套了有木有味赃。那如果給定寬高，設(shè)置overflow:hidden（溢出隱藏）虐拓，就會把名字截掉一半心俗，小李子表示名字長怪我咯？怎么不說畢加索的名字呢蓉驹。
因?yàn)殚_發(fā)的時(shí)候需要考慮到種種可能城榛，如果把列表高度設(shè)置很高，一排好友列表的名字都是非常短一行可以顯示态兴，那就又空余了很多狠持，很難看。所以诗茎，這種列表布局才用浮動(dòng)的方式顯然并不是最完美的解決方案工坊。
今天介紹一種基于display:inline-block的方法來實(shí)現(xiàn)列表布局。對于這種高度不固定的列表布局有奇效敢订。
HTML結(jié)構(gòu)：
CSS樣式：
效果圖：
此時(shí)你發(fā)現(xiàn)列表之間多了些間距，怎么去掉罢吃？請參考上一篇文章：花樣去除inlien-block元素間距.
我們再改下CSS代碼楚午，去除列表間距，給外面的UL標(biāo)簽加上內(nèi)邊距：
得到效果圖：
這時(shí)候你發(fā)現(xiàn)間距是沒了尿招，可是還很多問題需要解決矾柜，第一個(gè)就是列表的頂部尚未對齊阱驾，第二個(gè)就是列表的水平等間距排列并沒有實(shí)現(xiàn)。
目前列表都是inline-block怪蔑，所以我們給li加個(gè)vertical-align: top里覆，讓他們頂部對齊。列表水平等間距排列缆瓣，我們可以用text-align: justify喧枷，這個(gè)除了用在段落文本的兩端對齊之外，還可以巧用在這里哦（此處應(yīng)該有掌聲）弓坞。部分代碼及效果圖如下：
第一排是不是兩端對齊了隧甚？那么問題來了，列表（或文字）要兩端對齊的前提就是內(nèi)容必須超過一行渡冻，而且對最后一行還沒有效果戚扳。
要解決最后一行列表無法兩端對齊其實(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)握础。也歡迎私聊告訴我辐董。
