html – 将一行表格框的总宽度扩展到100％

2023年6月9日 169次阅读

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

我想让电子邮件输入一行.日期,时间和数字输入采取另一行.但是,我不确定如何让日期/时间/数字输入完全跨越表格宽度的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>

最佳答案 我会用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;
}
点赞