我怎样才能把一个输入元素放在与其标签相同的行上？
我想在同一行放置一个label和一个input[type=text] ，我希望input的宽度能够填充包含元素的剩余宽度，而不管标签文本的长度如何（参见第一图像）。
我试图使用width: auto; 为input ，但它似乎有一个静态宽度。 我也试过width: 100%; ，但将input移动到一个新行（请参阅第二张图）。
我怎样才能实现这个使用CSS？
没有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的原因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%
}
这仍然适用于我，但是这是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;
}
上一篇: How can I put an input element on the same line as its label?