Html 如何将输入元素与其标签放在同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6938900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I put an input element on the same line as its label?
提问by enenkey
I would like to put a labeland an input[type=text]on the same line, and I would like for the input's width to fill the remaining width of the containing element, regardless of the length of the label's text (see first image).
我想将 alabel和 aninput[type=text]放在同一行上，并且我希望input's 的宽度填充包含元素的剩余宽度，而不管标签文本的长度（见第一张图片）。
I tried to use width: auto;for the input, but it seems to have a static width. I also tried width: 100%;, but that moves the inputto a new line (see second image).
我尝试使用width: auto;for input，但它似乎具有静态宽度。我也尝试过width: 100%;，但这会将 移到input新行（参见第二张图片）。
How can I achieve this using CSS?
如何使用 CSS 实现这一点？
回答by thirtydot
It's possible without JavaScript, see: http://jsfiddle.net/Khmhk/
没有 JavaScript 也是可能的，请参阅：http: //jsfiddle.net/Khmhk/
This works in IE7+ and all modern browsers.
这适用于 IE7+ 和所有现代浏览器。
HTML:
HTML：
<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>
CSS:
CSS：
label {
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
input {
width: 100%
}
The reason why overflow: hiddenis so magically usefulin this instance is explained here.
这里解释了为什么在这种情况下overflow: hidden如此神奇有用的原因。
display: table-cellis another option, see: http://jsfiddle.net/Khmhk/1/
display: table-cell是另一种选择，请参阅：http: //jsfiddle.net/Khmhk/1/
This works in IE8+and all modern browsers:
这适用于 IE8+和所有现代浏览器：
HTML:
HTML：
<div class="container">
<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>
</div>
CSS:
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%
}
回答by henry
That still works for me, but ftr this is how Bootstrap 3 does it (thanks to @morten.c's answer to "Bootstrap full-width text-input within inline-form"). Don't know if it's harder to break than @thirtydot's, or anything. But here it is, and here's a fiddlethat also gives a basic example of how to deal with a narrow-screen break point.
这对我来说仍然有效，但是这就是 Bootstrap 3 的方式（感谢@morten.c 对“内联表单中的引导程序全宽文本输入”的回答）。不知道是否比@thirtydot 或其他东西更难破解。但它就在这里，这里有一个小提琴，它也给出了如何处理窄屏断点的基本示例。
HTML:
HTML：
<form class="responsive">
<input type="text" placeholder="wide input..."/>
<span>
<input type="submit"/>
</span>
</form>
CSS:
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;
}
