1. 程式人生 > >使用inline-block導致其他元素無法居中

使用inline-block導致其他元素無法居中

今天遇到使用兩個display:inline-block的div無法對齊的問題,情況如下。查了下發現兩個並列的inline-block預設是基線對齊的,可通過設定vertical-align進行頂部對齊。

css程式碼:

<style>
	*{
		margin: 0px;
		padding: 0px;
	}
	div{
		display: inline-block;
		height: 40px;
	}
	#test3{
		font-size: 30px;
		background-color: blue;
	}
	ul{
		height: 60px;
		background-color: black;
		display: inline-block;
	}
	li{
		width: 100px;
		height: 50px;
		margin-right: 10px;
		font-size: 40px;
		float: left;
		list-style-type: none;
		background-color: orange;
	}
</style>
 html程式碼
<div id="test3">
	vertical-align3
</div>


<ul>
	<li>測試1</li>
</ul>

         

        當vertical-align為baseline時,對齊情況如下:

        

綜上如果將vertical-align設定為top,即可解決問題