html - 将一行表单框的总宽度扩展到 100%

Question

我正在创建一个表单，我在同一行上有几个输入框。

我想让电子邮件输入占一行。日期、时间和数字输入取另一行。但是，我不确定如何让日期/时间/数字 输入正好跨越表单宽度的 100%。

我现在在 CSS 中的百分比是估计值，因此数字框的边缘不会与电子邮件输入框垂直对齐。

input[type=email] {
  width: 100%;
}
input[type=date] {
  width: 22%;
  margin-right: 15px;
}
input[type=time] {
  margin-right: 15px;
}
input[type=number] {
  width: 11.4%
}

<form>
  Email: <input type="email"><br>
  Date: <input type="date">
  Time: <input type="time">
  Number in Party: <input type="number">
</form>

Answer 1

我会用 flex 来做，这是一个有效的 example

我将每一行包裹在一个 div 上，如下所示:

<form>
  <div>Email: <input type="email"></div>
  <div>
    <div>Date: <input type="date"></div>
    <div>Time: <input type="time"></div>
    <div>Number in Party: <input type="number"></div>
  </div>
</form>

CSS

form{

  display: flex;
  flex-direction: column;
}

form>div{
  display: flex;
}

form>div input{
  flex-grow: 1;
}

form>div>div{
  display: flex;
  flex-grow: 1;
}