CSS 如何让文本输入框占据父块内的所有剩余宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5825861/
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 to make text input box to occupy all the remaining width within parent block?
提问by user422039
How do achieve the following:
如何实现以下目标：
┌────────────────────parent────────────────────┐
│ label [text-box ] [button] │
│ paragraph │
└──────────────────────────────────────────────┘
labelis aligned to the leftbuttonis aligned to the righttext-boxoccupies all remaining width within parentparagraphis aligned to the left, must be left-aligned withlabeltoo
label左对齐button右对齐text-box占据父级内所有剩余的宽度paragraph左对齐，label也必须左对齐
Both labeland buttonshould obey font properties defined elsewhere as maximum as possible. parentis center-aligned within window, and, naturally, can have arbitrary width.
二者label并button应服从作为最大尽可能别处定义字体属性。parent在窗口内居中对齐，并且自然地可以具有任意宽度。
Please advise.
请指教。
回答by wdm
Updated[Oct 2016]: Flexbox version...
[2016 年 10 月]更新：Flexbox 版本...
form {
display: flex;
}
form input[type="text"] {
flex: 1;
}<form>
<label>Name</label>
<input type="text" />
<button>Submit</button>
</form>
<p>Lorem ipsum...</p>Original answer [Apr 2011]: Table-less CSS version (of table behavior)...
原始答案 [2011 年 4 月]：无表 CSS 版本（表行为）...
<div id="parent">
<div id="inner">
<label>Name</label>
<span><input id="text" type="text" /></span>
<input id="submit" type="button" value="Submit" />
</div>
<p>some paragraph text</p>
</div>
CSS...
CSS...
#inner {
display: table;
width: 100%;
}
label {
display: table-cell;
}
span {
display: table-cell;
width: 100%;
padding: 0px 10px;
}
#text {
width: 100%;
}
#submit {
display: table-cell;
}
回答by asdjfiasd
I don't like first answer with the "table-less" version that actually uses table-cell. Nor the second answer that uses actual tables. Nor third answer that uses hardcoded widths. Here is solution using flex. It is by far simplest:
我不喜欢实际使用表格单元格的“无表格”版本的第一个答案。也不是使用实际表格的第二个答案。也不是使用硬编码宽度的第三个答案。这是使用flex 的解决方案。这是迄今为止最简单的：
#parent {
display: flex;
}
input {
flex: 1;
}<div id="parent">
<label>Name</label>
<input type="text" />
<button>Button</button>
</div>
<div>paragraph</div>回答by Thomas Shields
Use tables. :D I know people tend to hate tables, but they will work in this situation...
使用表格。:DI 知道人们往往讨厌桌子，但他们会在这种情况下工作......
<div id="parent">
<table style="width:100%">
<tr>
<td>label</td>
<td style="width:100%">
<input type="text" style="width:100%">
</td>
<td>
<button>clickme</button>
</td>
</tr>
</table>
</div>
回答by Marty
The only way I know how to achieve this or similar, is to have the "text-box" as a block element that would automatically fill the entire width of the parent, then apply padding to the left and right equal to the total width of the containers on the left and right. Then make the "label" and "button" elements have their position set as relativeand float them to where they need to be (float: left, float: right).
我知道如何实现这一点或类似的唯一方法是将“文本框”作为一个块元素，它会自动填充父项的整个宽度，然后向左右应用填充，等于总宽度左边和右边的容器。然后将“标签”和“按钮”元素的位置设置为相对位置并将它们浮动到需要的位置（浮动：左，浮动：右）。
Something like,
就像是，
HTML:
HTML：
<div id="parent">
<div id="label">label</div>
<div id="button">button</div>
<div id="text-box">
text<br />
text<br />
text<br />
text<br />
text
</div>
</div>
CSS:
CSS：
div#label
{
position: relative;
float: left;
width: 200px;
background: #F00;
}
div#button
{
position: relative;
float: right;
width: 120px;
background: #0F0;
}
div#text-box
{
padding-left: 200px;
padding-right: 120px;
background: #00F;
}
If the button and label elements don't need to have a set width, all elements could just have their width as a percentage value (all adding up to 100%).
如果按钮和标签元素不需要设置宽度，则所有元素都可以将其宽度作为百分比值（全部加起来为 100%）。
回答by Aminah Nuraini
Don't forget, you can use calc(). Let's assume total of width used by labeland buttonis 100px (including margin), then the width is:
别忘了，您可以使用calc(). 让我们假定由总宽度使用的label和button是100像素（包括余量），则宽度为：
.text-box {
width: calc(100% - 100px);
}
If you think it doesn't support a lot of browser, well you are wrong indeed. It supports a lot now. Time has changed
如果你认为它不支持很多浏览器，那你就错了。它现在支持很多。时间变了
回答by Brian Haak
It works without flex and tables if assign float: rightand put the button (or several buttons in reverse order) beforethe input box.
如果在输入框之前分配float: right并放置按钮（或多个按相反顺序排列的按钮），则它无需 flex 和表格即可工作。
Then place the label with float: left, give the input box 100% widthand wrap it inside a spanwith display: blockand overflow: hidden.
然后将标签用float: left，给输入框100％的宽度，敷一个内部跨度与display: block和overflow: hidden。
No magic involved:
不涉及魔法：
<div style="width:100%">
<button style="float:right">clickme 2</button>
<button style="float:right">clickme 1</button>
<label style="float:left">label</label>
<span style="display:block;overflow:hidden">
<input type="text" style="width:100%"/>
</span>
</div>The basic idea that all right side buttons are specified before the input box in the reverse order.
所有右侧按钮都按相反顺序在输入框之前指定的基本思想。
