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

Question

这是代码：

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

如何使输入框元素在保持在同一行的情况下扩展以填充所有剩余空间？ 如果我使用100％，它会独占一行...

- luca

Answer 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的最前面。虽然有点令人不爽，但这就是生活。

关键步骤是使用overflow: hidden;: 为什么需要这样做可以在以下链接中找到解释:

• http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
• CSS块级格式化上下文是如何工作的？

围绕input添加额外的标签是必要的，因为对于input，display:block;没有任何效果：CSS/DOM中是什么阻止了显示为块级元素的输入框扩展到其容器的大小？

- thirtydot

---

非常有帮助！为什么按钮必须放在第一位？ - Thomas David Baker

@ThomasDavidBaker：向右浮动的元素必须在具有溢出隐藏的元素之前，否则会破坏布局。 - thirtydot

标签的垂直对齐方式怎么设置？ - simbolo

@thirtydot overflow:hidden 似乎起到了很大的作用，否则块级元素会移动到下一行。对此有什么解释吗？谢谢 - Adriano

@AdrienBe: 这是链接。 - thirtydot

Answer 2

如果你想要一个跨浏览器的解决方案，你可以使用表格。

<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>

- user911483

Answer 3

如果您不关心旧浏览器的支持（IE <= 9），请使用flexbox布局：

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;
}

- Antonello