前端小技巧02-基于inline-block的列表布局

想必浮动布局大家都已经了解并熟练了，这是个栗子，你有一个好友列表:

用浮动布局挺正常对吧，万一小李子的昵称被抢注了，那只好用全称 莱昂纳多·迪卡普里奥，于是这个好友列表变成了这样:

这是由于没有给没一个列表项给定固定宽高，所以发现布局乱套了有木有。那如果给定宽高，设置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样式及效果图如下：

这种布局在响应式或者移动端是非常友好的，可以随着页面大小的变化，自动变化布局，不信我随意拖动一下预览窗口大小，你们看下结果：

好了，还有更多好玩的，等着你们去发现。也欢迎私聊告诉我。