搜索框與搜索按鈕並排——無縫對接

1、效果圖

　　難點在於搜索框與搜索按鈕要無縫對接

2、實現

　　（1）搜索框的高度（height+上下border）==搜索按鈕的高度

　　（2）搜索框的字體大小、樣式==搜索按鈕中的字體大小、樣式

　　（3）搜索框和搜索按鈕都要去掉邊框：outline:none;當然 搜索按鈕需要再加上一個border:none;

3、代碼

　html代碼：　

<div class="search">
      <input type="text" id="in" value="圖書開搶" /><button class="btn_search">搜索</button>
 </div>

　css代碼：

.search #in{
    width:454px;
    height:30px;
    border:2px solid red;
    outline:none;
    font:14px/30px "microsoft yahei";
}
.search .btn_search{
    background:red;
    width:80px;
    height:34px;
    color:white;
    border:none;
    outline:none;
    font:14px/34px "microsoft yahei";
}