html - 如何将表单中的字段放置为相同的高度和宽度

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，两个输入元素的宽度相同，但不希望增加高度。

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

有人可以帮我解决这个问题吗？也可以动态添加字段（意味着更多的输入元素）。

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

标签： htmlcss

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>