如何将输入框和标签放在同一行？

Question

我想在同一行上放置一个label和一个input[type=text]，并且希望input的宽度填充包含元素的剩余宽度，而不管label文本的长度（请参见第一张图片）。

我尝试使用width:auto;来设置input的宽度，但它似乎有一个静态宽度。我还尝试了width:100%;，但这会将input移到新行（请参见第二张图片）。

如何使用CSS实现此功能？

- enenkey

---

使用JavaScript怎么样？这是一个有效的选择吗？ - Shadow The Spring Wizard

@ShadowWizard 我来这里寻找一个替代我的 JavaScript 解决方案。 - Tomáš Zato

@TomášZato，你找到了吗？ - Shadow The Spring Wizard

这在2022年还这么难做，真是太疯狂了... - new name

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

- thirtydot

---

overflow: hidden 这个建议纯粹是 块级格式化上下文 的巫术。我爱你。我永远无法完全理解 CSS。 - mrak

我只想补充一点，为了使这个方法起作用，浮动元素似乎必须出现在DOM中的<span>（带有overflow：hidden）之前。总的来说，这是一个很棒的CSS解决方案，谢谢！ - Nisk

使用 span display:block 与仅在 div 上使用 overflow:hidden 有特定的原因吗？ - PJH

@PJH：不一定。哪一个都可以，这取决于你认为哪一个更符合语义化HTML。 - thirtydot

overflow: hidden 的魔法解释链接已经失效，但是未来的人们可以在存档网站上查看。 - Waldo Hampton

Answer 2

这对我仍然有效，但是 Bootstrap 3 是这样做的（感谢 @morten.c 对“Bootstrap 内联表单中的全宽度文本输入”的回答）。不知道它是否比 @thirtydot 的更难破解，或者其他任何事情。但是在这里，这里有一个演示，它还提供了如何处理窄屏幕断点的基本示例。

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

- henry