水平排列的li不對齊問題

HTML代碼如下：

• 哈哈哈哈
• 呃呃呃額額

css代碼如下：

ul li{
display: inline-block;
}
ul li img{
display: block;
}
分析：

3個li設置了display: inline-block;這時候水平排列，但是三個盒子裏面的內容情況不一樣，第一個和第二有圖片和文字，第三個只有圖片。這時候谷歌瀏覽器顯示如下：

這是因爲vertical-align屬性致的，vertical-align默認設置爲vertical-align：base-line

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。此時第三個li盒子底部與前2個盒子base-line對齊，也就出現了這個不對齊情況。這是比較特殊的情景。

消除方法：

1.給li設置：vertical-align:top;

瀏覽器顯示如下：

這時候對齊了

2.也可以給li設置浮動：float：left

3.可以在第三個li盒子裏底部加上文字，也可以達到對齊效果

轉載於:https://my.oschina.net/Cubicluo/blog/717893