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

Question

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

我希望将电子邮件输入设为一行。日期，时间和数字输入采取另一行。但是，我不确定如何让日期/时间/数字输入完全跨越表单宽度的100％。

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

＆＃13;

＆＃13;

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%
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;
}

Answer 2

您可以使用<label>对width，padding＆amp;表单字段标签的margin。

示例：

＆＃13;

＆＃13;

label, input {
display: inline-block;
height: 24px;
line-height: 24px;
}

label {
width: 18%;
margin: 6px 0;
padding: 3px 0 3px 3px;
background-color: rgb(227,227,227);
}

input {
width: 80%;
}

input:nth-of-type(n+2) {
width: 13%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

input[type=email] {
  width: 100%;
}
input[type=date] {
  width: 21%;
  
}
input[type=time] {
  width: 21%;
   margin-right:42px;
}
input[type=number] {
 
  width: 20.9%;
    
  
}

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