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

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%的宽度将它们对齐在同一条线上吗

Demo

<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
}