關於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/