让元素填充保持水平 space

Question

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

除了在每个输入上设置明确的宽度之外，还有其他方法可以实现吗？本质上就是强制输入占其parent剩余space的100%？

None 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%，并且其中的元素完全填充该宽度，它们之间没有任何 space。

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>

让元素填充保持水平 space

Have an element fill remaining horizontal space

html

css

width