我被要求创建一个表单，其中每个输入在其自然宽度（左侧）上都有一个标签，输入旁边（在同一行中的右侧）上填充剩余空间，以便每个输入的右边缘为垂直对齐。
除了在每个输入上设置显式宽度之外，还有其他方法可以实现此目的吗？从本质上讲，是否要强制输入占用其父项剩余空间的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％，并且其中的元素完全填充该宽度，而彼此之间没有任何间隔。
一种方法是使用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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句