我尝试为响应式布局创建搜索框,对于搜索按钮,宽度固定为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
答案 0 :(得分: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 calc
请记住,较低版本的Internet Explorer不支持css3 calc。如果你想支持它包括ie8&amp; ie7你可以使用jQuery。