如何在表单中放置具有相同高度和宽度的字段

Question

我正在尝试将字段一个接一个地放置在表单中(在新行上(以具有相同的高度和宽度。

下面是代码片段：

label {
display: block;
position: relative;
padding-left: 120px;
padding-top: 5px;
}
label > span {
position: absolute;
left: 0;
}
input {
min-width: 169px;
min-height: 41px;
-moz-box-sizing: border-box; /* or `border-box` */
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

<label>
<span>email</span>
<input type="email"/>
</label>
<label>
<span>Date</span>
<input type="date"/>
</label>

以上将在新行上一个接一个地创建输入字段。

但是，它们都具有不同的宽度。当我将输入元素的box-sizing更改为content-box时，两个输入元素的宽度相同，但不希望增加高度。

我希望输入元素的宽度和高度相等。

有人可以帮助我吗？此外，字段可以动态添加(意味着更多的输入元素(。

有没有办法让样式添加到所有元素中，而不是将来单独更改它。谢谢。

Answer 1

您可以使用以下更新的代码：

label {
display: block;
position: relative;
padding-top: 5px;
margin-bottom: 5px;
}
label > span {
position: relative;
width: 100px;
float: left;
}
input {
width: 169px;
height: 24px;
-moz-box-sizing: border-box; /* or `border-box` */
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

<label>
<span>email</span>
<input type="email" />
</label>
<label>
<span>Date</span>
<input type="date" />
</label>