Question

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

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

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

＆＃13;

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

＆＃13;

在上面的情况中，我希望每个包装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>

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

1 个答案: