如何让输入元素占据所有剩余的水平空间？答案

【问题标题】：How do I make an input element occupy all remaining horizontal space?如何让输入元素占据所有剩余的水平空间？
【发布时间】：2011-11-03 14:43:29
【问题描述】：

代码如下：

<div style="width:400px">
    some text..
    <input type="text" />
    <button value="click me" />
</div>

如何使输入元素扩展以填充所有剩余空间，同时保持在同一行？如果我把 100% 放在它自己的行...

【问题讨论】：

标签： html css

【解决方案1】：

见：http://jsfiddle.net/thirtydot/rQ3xG/466/

这适用于 IE7+ 和所有现代浏览器。

.formLine {
    overflow: hidden;
    background: #ccc;
}
.formLine input {
    width: 100%;
}
.formLine label {
    float: left;
}
.formLine span {
    display: block;
    overflow: hidden;
    padding: 0 5px;
}
.formLine button {
    float: right;
}
.formLine input, .formLine button {
    box-sizing: border-box;
}

<div class="formLine">
    <button>click me</button>
    <label>some text.. </label>
    <span><input type="text" /></span>
</div>

button 必须在 HTML 中排在第一位。有点令人反感，但c'est la vie。

关键步骤是使用overflow: hidden;：为什么有必要在以下位置进行解释：

input 周围的额外跨度是必要的，因为display:block; 对input 没有影响：What is it in the CSS/DOM that prevents an input box with display: block from expanding to the size of its container

【讨论】：

我昨天答应过你的 +1 :)
box-sizing 不支持 IE7 及以下版本。
@pixelfreak: 是的，但是这里box-sizing 的使用并不是绝对必要的，所以没关系。
@thirtydot overflow:hidden 似乎发挥了很大的作用，否则块元素将移至下一行。对此有何解释？谢谢
@AdrienBe: Here you go.

【解决方案2】：

如果您不关心旧浏览器支持 (IE flexbox layout：

div{
  background-color: red;
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: -moz-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}
div input {
    flex: 1;
    -webkit-flex:1;
    -ms-flex: 1;
    -moz-flex: 1;
    min-width: 200px;
}

【讨论】：

【解决方案3】：

如果你想要一个跨浏览器的决定，你可以使用 table

<table>
  <tr>
    <td>some text</td>
    <td><input type="text" style="width:100%" /></td>
    <td><button value="click me" /></td>
  </tr>
</table>

如果你不能使用桌子，那就更难了。例如，如果您确切知道某些文本的宽度，您可以尝试以下方式：

<div style="padding:0px 60px 0px 120px;">
  <div style="width:120px; float:left; margin:0px 0px 0px -120px;">some text</div>
  <input type="button" style="width:50px; float:right; margin:0px -55px 0px 0px;" />
  <input type="text" style="width:100%;" />
</div>

【讨论】：