关于display:inline-block布局导致错位问题分析

移动端设计稿需求是这样的，如下图:

未知的几个头像从左至右并行居中排列。

一般可能直接使用float，但是设计图要求头像排列始终是居中的，于是想到要让它们成为行内元素,然后可使用的方法有flex box,inline-block；

因为是在移动端，于是使用flex box:

.user-list {
margin: 20px auto;
display:-webkit-box;

-webkit-pack:center;
}

.user-list li {
width: 46px;
height: 46px;
margin: 0 5px;
border-radius: 50%;
overflow: hidden;
}

.user-list li img {
　　width: 100%;
}

<ul class="user-list">
                <li><img src="images/u137.png" /></li>
                <li><img src="images/user2.jpg" /></li>
                <li><img src="images/u137.png" /></li>
                <li><img src="images/user.jpg" /></li>
                <li><img src="images/u137.png" /></li>
</ul>

嗯嗯，一切看起来很完美，居中了，可以放下好几个。但是，如果要放下10个，擦，没法换行，悲剧了。

于是使用display:inline-block，大家都知道块级元素和行内元素的区别，inline-block就是让你两者兼顾。

.user-list {
        margin: 20px auto;
        text-align: center;
    }
    
    .user-list li {
        display: inline-block;
        width: 46px;
        height: 46px;
        margin: 0 5px;
        border-radius: 50%;
        overflow: hidden;
    }

　　.user-list li img {
　　　　width: 100%;
　　}

于是出现了下面这种情况：

在IOS上是这样的：

在chrome：

你妹，到底几个意思，上上下下的....

这些问题在手机上出现的，测试的就找到我问什么情况，我说在PC上浏览器都是好的啊，我估计是inline-block导致的，但是试了半天一切正常。最后估摸着我写的demo里面各个图片是一样大小的，会不会真是数据头像不一样大？

然后换了上面的图片，在PC上复现了问题。既然能在PC上复现，那问题就好解决多了。

导致人问题分析如下：

1、display：inline-block，是基于baseline对齐的，大小不一会导致上下不齐，所以设置的时候最好设置vertical-align属性。

2、图片的宽度设置是100%自适应的，长宽高不一致会导致头像显示不完整，如上面，成半圆了，所以设置成max-height:100%；

搞定！

.user-list {
        margin: 20px auto;
        text-align: center;
    }
    
    .user-list li {
        display: inline-block;
        width: 46px;
        height: 46px;
        margin: 0 5px;
        border-radius: 50%;
        overflow: hidden;
        vertical-align: top;
    }
    
    .user-list li img {
        max-height: 100%;
    }

 对于display:inline-block的知识可以参考：http://ued.taobao.org/blog/2012/08/inline-block/