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