如何使文本input框占据父块内的所有剩余宽度？
如何做到以下几点：
┌────────────────────parent────────────────────┐ │ label [text-box ] [button] │ │ paragraph │ └──────────────────────────────────────────────┘ -
labelalignment到左侧 -
buttonalignment到右侧 -
text-box占用父内的所有剩余宽度 -
paragraph与左边alignment，也必须与label左alignment
label和button都应尽可能地服从别处定义的字体属性。 parent窗口中心alignment，自然可以有任意的宽度。
请指教。
更新 [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>
我不喜欢首先回答实际使用表格单元的“无表”版本。 也不是使用实际表格的第二个答案。 也不是使用硬编码宽度的第三个答案。 这里是使用flex的解决scheme。 这是最简单的：
#parent { display: flex; } input { flex: 1; }
<div id="parent"> <label>Name</label> <input type="text" /> <button>Button</button> </div> <div>paragraph</div>
使用表格。 ：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>
别忘了，你可以使用calc() 。 假设label和button的宽度总和为100px（包括边距），那么宽度为：
.text-box { width: calc(100% - 100px); }
如果你认为它不支持很多浏览器，那么你错了。 它现在支持很多。 时间已经改变
我知道如何做到这一点或类似的唯一方法是将“文本框”作为一个块元素，它会自动填充父项的整个宽度，然后向左和右应用填充等于总宽度左侧和右侧的容器。 然后使“标签”和“button”元素将它们的位置设置为相对的 ，并将它们浮动到它们需要的位置（float：left，float：right）。
就像是，
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：
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; }
如果button和标签元素不需要设置宽度，则所有元素的宽度都可以为百分比值（全部为100％）。
如果赋值float: right并且在input框之前放置button（或者按相反顺序的几个button） ，它将无需flex和tables。
然后将标签放在float: left ，将input框的宽度设置为100％，并用display: block和overflow: hidden将其包装在一个范围内。
没有魔法介入：
<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>
