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

Question

我被要求创建一个表单,其中每个输入都有一个标签,其自然宽度(向左)和输入旁边(在右侧,在同一行内)填充剩余空间,以便每个输入的右边缘是垂直对齐.

除了在每个输入上设置显式宽度之外,有没有办法实现这一目标？从本质上讲,强制输入占用其父级剩余空间的100%？

没有关于如何使div填充剩余水平空间的答案？似乎对我有用,但我不确定为什么我的情况会有所不同.

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