如何使響應式並排表單元素

Question

如何做到這一點，以便無論div的寬度如何， select標記和text輸入都可以並排顯示，同時還使text輸入具有響應性（占用容器div寬度的100％）

CSS：

input[type="text"] { width: 100%; }

HTML：

<div style="width:500px; background:red; padding:10px;">
   <input type="text" name="test" style="float:left;"> 
   <select style="float:left;"><option>test</option></select>
</div>

示例： http ： //jsfiddle.net/F6Jtj/

Answer 1

您是否想將兩條線上的寬度都對齊100%不是這樣

演示版

<div class="wrap">
    <select>
        <option>Hello</option>       
        <option>World</option>
    </select>
    <span><input type="text" /></span>
</div>

.wrap span {
    display: block;
    padding-right: 5px;
    overflow: hidden;
}
.wrap input[type=text] {
    width: 100%
}
.wrap select {
    float: right
}