line-height下的dispay:inline-block垂直居中

 

 

 

html:

<div class="search fl">

	<span class="search-box">

		<input type="text" name="keyword" autocomplete="off" class="s-input" placeHolder="Search..."/>

		<button class="s-btn">Search</button>

	</span>
　　　　 <i>&nbsp;</i><!-- 这个必不可少 -->

</div>

　　

css：

.search{height: 100px;margin-left: 20px;}

.search-box{border: 1px solid #ccc; border-radius: 5px; display: inline-block;line-height:1px;}

.s-input{width: 340px;height: 23px;padding: 8px;outline: 0;border: 0;border-radius: 5px 0 0 5px;}

.s-btn{height: 40px;border: 0;width: 70px; border-radius: 0 5px 5px 0;}