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

时间:2023-03-09 06:17:14
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;}