input輸入框的寬度自適應

場景：在寫H5移動端的時候，常常會遇到再頂部有搜索框的情況，如下圖：

因爲要適應不同的移動設備的屏幕寬度，若將所有的元素寬度寫死，更換設備後無論是屏幕寬度增大還是縮小，樣式一定會亂掉。因此可以將中間輸入框的寬度設置爲可變的，即可跟隨屏幕寬度的變化而變化，這樣就解決的適配的問題。且看示例代碼：
HTML

<div class="title_box">
    <div class="title_left"></div>
    <input type="text" />
    <div class="title_right"></div>
</div>

CSS
.title_box{
width: 100%;
overflow: hidden;
display: flex;
}
.title_left{width: 100px;height: 40px;border: 1px solid red;float: left;}
.title_right{width: 100px;height: 40px;border: 1px solid green;float: right;}
.title_box input{width: 100%;}
重點已在上面標記出來了，就是父層使用display:flex;然後左邊和右邊的元素分別定寬並浮動，然後中間的輸入框就可以寬度100%啦。你可以試試將display:flex去掉，此時輸入框的100%就是整個屏幕的寬度。關於display:flex的用法請看這篇文章：http://blog.csdn.net/linda_417/article/details/51507176