並列div與框寬度百分比和另一個固定寬度

Question

我嘗試創建搜索框爲響應佈局，搜索按鈕的寬度固定爲52px，但對於輸入寬度應爲100％。

<div class="btn_box">Search</div> 
<div class="search_box"> 
    <input type="text" value="Search"> 
</div> 

.search_box { 
    border: 1px solid #000000; 
} 
.btn_box { 
    background-color: #5D85D0; 
    border: 1px solid #DDDDDD; 
    color: #FFFFFF; 
    float: right; 
    padding: 3px; 
    position: relative; 
    text-align: center; 
    width: 52px; 
} 
input { 
    width:88%; 
    padding:5px; 
    -webkit-box-sizing: border-box; 
    /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; 
    /* Firefox, other Gecko */ 
    box-sizing: border-box; 
} 

現在，當我調整輸入框的大小將下降。您可以點擊這裏JSFiddle

Answer 1

.search_box { 
    border: 1px solid #000000; 
} 
.btn_box { 
    background-color: #5D85D0; 
    color: #FFFFFF; 
    float: right; 
    position: relative; 
    text-align: center; 
    width: 52px; 
    border: none; 
    outline: none; 
} 
input { 
    width: -moz-calc(100% - 52px); 
    width: -webkit-calc(100% - 52px); 
    width: -o-calc(100% - 52px); 
    width: calc(100% - 52px); 
    border: none; 
    outline: none; 
} 

<div class="btn_box">Search</div> 
<div class="search_box"> 
    <input type="text" value="Search"> 
</div> 

使用CSS3鈣

請記住，CSS3計算未在較低版本的Internet Explorer的支持。如果你想支持交叉瀏覽器，包括ie8 & IE7，你可以使用jQuery。