水平排列的li不對齊問題

HTML代碼以下：

<ul>
	<li>
	<img src="img/1.png" alt="">
	哈哈哈哈
	</li>
	<li>
	<img src="img/1.png" alt="">
	呃呃呃額額
	</li>
	<li>
	<img src="img/1.png" alt="">
	<!-- 蛤蛤蛤 -->
	</li>
</ul>

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盒子裏底部加上文字，也能夠達到對齊效果