使用CSS填充剩余空间

Question

我有以下html（JSFiddle）：

<div id="container">
  <div>
    <label>Simple label
      <input>
    </label>
  </div>
  <div>
    <label>Other label
      <input>
    </label>
  </div>
  <div>
    <label>Variable label
      <input>
    </label>
  </div>
</div>

是否可以使用CSS（我不想使用JavaScript），用输入填充剩余空间？我有可变的标签长度​​，我想在没有float: right的情况下对齐输入的右侧（但也不要打扰左对齐）。

Answer 1

您可以将label设为flex父，并将input设为flex-grow: 1

#container div {
  margin: 10px 0;
  width: 300px;
}

input {
  flex-grow: 1;
}

label {
  display: flex;
}

<div id="container">
  <div>
    <label>Simple label
      <input>
    </label>
  </div>
  <div>
    <label>Other label
      <input>
    </label>
  </div>
  <div>
    <label>Variable label
      <input>
    </label>
  </div>
</div>