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

Question

无论 div 的宽度如何，如何使 select 标签和 text 输入并排显示，同时还使 text 输入响应(占用容器 div 的 100% 宽度)

CSS:

input[type="text"] { 宽度: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
}