让一个元素填充剩余的水平空间

Question

我被要求创建一个表单，其中每个输入在其自然宽度（左侧）处都有一个标签，并且输入旁边（在右侧，在同一行内）填充剩余空间，以便每个输入都是垂直对齐的。

除了在每个输入上设置显式宽度之外，还有其他方法可以实现吗？本质上是强制输入占用其父级剩余空间的100%？

How to make a div to fill a remaining horizontal space? 的答案似乎都不适合我，但我不确定为什么我的情况会有所不同。

<div class="name-field">
     <label for="name">Name:</label>
     <input type="text" id="name" />
</div>

<div class="email-field">
     <label for="email">Email address:</label>
     <input type="email" id="email" />
</div>

在上述情况下，我希望每个包装 div 的宽度为 100%，并且其中的元素完全填充该宽度，它们之间没有任何空间。

Answer 1

一种方法是使用flexbox：

div {
  display: flex;
}

div input {
  flex: 1;
}

<div class="name-field">
     <label for="name">Name:</label>
     <input type="text" id="name" />
</div>

<div class="email-field">
     <label for="email">Email address:</label>
     <input type="email" id="email" />
</div>