如何将输入元素与其标签放在同一行？

Question

我想把a label和a input[type=text]放在同一条线上,我希望input宽度能够填充包含元素的剩余宽度,而不管标签文本的长度如何(见第一张图片).

我试图用width: auto;的input,但它似乎有一个静态的宽度.我也尝试了width: 100%;,但是这会移动input到一个新的线(见第二张图).

如何使用CSS实现这一目标？

Answer 1

没有JavaScript就可以,请参阅:http://jsfiddle.net/Khmhk/

这适用于IE7 +和所有现代浏览器.

HTML:

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

这里解释了在这种情况下overflow: hidden如此神奇的原因.

display: table-cell是另一种选择,请参阅:http://jsfiddle.net/Khmhk/1/

这适用于IE8 +和所有现代浏览器:

HTML:

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}