如何使中间元素在所有可用空间上水平拉伸

Question

我有一个基本表格

<div class="outer">
    <label>Label</label>
    <input/>
    <button>Search!</button>
</div>

我希望与这些基本声明一起显示内联：

.outer{
    width: 100%;
}

.outer, label, button {
    display: inline-block;
}

问题是 - 如何将搜索按钮拉到右侧并使输入元素在可用空间上水平拉伸？

这是a JSBin where I attempted this effect，但不知道如何拉伸输入。我不知道总宽度，因此无法控制输入的宽度。

Answer 1

你可以使用浮动：

HTML：

<div class="outer">
    <label>Label</label>
    <button>Search!</button>
    <div><input/></div>
</div>

CSS：

.outer{
  border: solid thin;
  overflow: hidden; /* Clear float */
}
.outer > label {
  float: left; /* Push left */
}
.outer > button {
  float: right; /* Push right */
}
.outer > div {
  overflow: hidden; /* Make it take remaining space */
}
.outer > div > input {
  width: 100%;  /* Make it fill its parent */
  box-sizing: border-box; /* Avoid extra width because of borders */
}

Demo

Answer 2

您可以使用CSS表格：

HTML：

<div class="outer">
  <label>Label</label>
  <div><input/></div>
  <button>Search!</button>
</div>

CSS：

.outer {
  display: table;
  width: 100%;
}
.outer > * {
  display: table-cell;
}
.outer > div  {
  width: 100%; /* Make it take as much space as possible */
}
.outer > div > input {
  width: 100%; /* Make it fill its parent */
  box-sizing: border-box; /* Avoid extra width because of borders */
}

Demo

Answer 3

您可以使用灵活的方框：

HTML：

<div class="outer">
  <label>Label</label>
  <input/>
  <button>Search!</button>
</div>

CSS：

.outer {
  display: flex;
}
.outer > input {
  flex-grow: 1;
}

Demo

Answer 4

将你的CSS更改为标题位，试试这个

.outer label, .outer button {
  display: inline-block;
  width:10%
}
input {
  width:75%
}