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

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

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

}

Email:

Date:

Time:

Number in Party:

最佳答案 我会用flex做这个,这是一个工作

example

我在div上包装了每一行,如下所示：

Email:

Date:

Time:

Number in Party:

CSSform{

display: flex;

flex-direction: column;

}

form>div{

display: flex;

}

form>div input{

flex-grow: 1;

}

form>div>div{

display: flex;

flex-grow: 1;

}