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
}

如何做出响应并排的表单元素

1 个答案: