使用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，即可解决问题