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

Question

我想将label和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如此神奇有用的原因是explained here。

---

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

此works in 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%
}

Answer 2

这对我来说仍然有用，但是ftr这就是Bootstrap 3的功能（感谢@morten.c's answer to "Bootstrap full-width text-input within inline-form"）。不知道它是否比@ thirtydot或其他任何东西更难打破。但在这里，here's a fiddle也给出了如何处理窄屏断点的基本例子。

HTML：

<form class="responsive">
    <input type="text" placeholder="wide input..."/>
    <span>
        <input type="submit"/>
    </span>
</form>

CSS：

form.responsive, form.responsive * {
    box-sizing: border-box;
    width: 100%;
    height: 40px !important; /* specify a height */
}
form.responsive {
    position: relative;
    display: table;
    border-collapse: separate;

    /* just to be safe */
    border: 0;
    padding: 0;
    margin: 0;
}
form.responsive > input {
    position: relative;
    width: 100%;
    float:left;
    margin-bottom: 0;
    display: table-cell;
}
form.responsive span {
    position: relative;
    width: 1%;
    vertical-align: middle;
    display: table-cell;
}
form.responsive span input {
    margin: 0;
    margin-left: -1px;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}