主要是利用box-sizing属性,设置为border-box。
样式如下:
.InputSearch { width:300px; height:28px; float:left; padding-left:5px; border-left:1px solid #666; border-bottom:1px solid #666; border-top:1px solid #666; border-right:none; vertical-align:middle; color:#999; outline:none; box-sizing: border-box; } .IconSearch { width:100px; height:28px; line-height:28px; float:left; text-align:center; background-color:#eef; outline:none; border:1px solid #666; cursor:pointer; box-sizing: border-box; }
Html代码:
<div> <input type="text" class="InputSearch" id="titleKey" name="titleKey" /> <input class="IconSearch" type="button" value="搜 索" /> </div>效果图:
评论