html - 如何使响应式并排表单元素

Question

您如何做到这一点，以便select标签和text输入将并排而不管div宽度如何，同时还使text输入响应式（占用容器宽度的 100% div）

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
}