html - float 4个输入框均等背景色

Question

我试图在我的网页的整个宽度上 float 4 个框，它们之间的间距相等。

当前输出如下所示:

这是通过以下 HTML 和 CSS 实现的

.info {
  background-color: black;
  padding: 20px 20px 40px 20px;
  margin-bottom: 10%;
}

.go_button {
  width: 175px;
  background-color: #01C3A7;
  border: none;
  cursor: pointer;
  border-radius: 0.429rem;
  color: #FFFFFF;
  font-family: Circular, Helvetica, Arial, sans-serif;
  font-size: 1.429rem;
  font-weight: bold;
  letter-spacing: 0px;
  padding: 3px;
}

.box {
  float: left;
}

<div class="info">
  <div class="box_container">
    <div class="box">
      <input type="text" placeholder="Departure Station" id="depart">
      <input type="hidden" id="departID" name="DeptStationID" style="display: none">
    </div>
    <div class="box">
      <input type="text" placeholder="Arrival Station" id="arrive">
      <input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
    </div>
    <div class="box">
      <input type="text" id="datepicker" value="@DateTime.Now.Date.ToString(" yyyy/MM/dd ")" name="DeptDate">
    </div>
    <div class="box">
      <input type="text" id="timepicker" name="time">
    </div>
    <div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
  </div>
</div>

我试图要求的输出如下:

我希望它能够根据屏幕显示调整大小，因此不能使用像素设置边距。目前，当我调整输出大小时，它会产生以下内容:

如您所见，背景颜色并未填满所有四个框。我添加了 height:auto 但这并不能解决问题。

请告诉我如何解决这些问题。

Answer 1

我会使用 flexbox 和 justify-content:space-between 而不是 float

.info {
  background-color: black;
  padding: 20px 20px 40px 20px;
  margin-bottom: 10%;
}

.go_button {
  width: 175px;
  background-color: #01C3A7;
  border: none;
  cursor: pointer;
  border-radius: 0.429rem;
  color: #FFFFFF;
  font-family: Circular, Helvetica, Arial, sans-serif;
  font-size: 1.429rem;
  font-weight: bold;
  letter-spacing: 0px;
  padding: 3px;
}

.box_container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

<div class="info">
  <div class="box_container">
    <div class="box">
      <input type="text" placeholder="Departure Station" id="depart">
      <input type="hidden" id="departID" name="DeptStationID" style="display: none">
    </div>
    <div class="box">
      <input type="text" placeholder="Arrival Station" id="arrive">
      <input type="hidden" id="arriveID" name="ArrvStationID" style="display: none">
    </div>
    <div class="box">
      <input type="text" id="datepicker" value="@DateTime.Now.Date.ToString(" yyyy/MM/dd ")" name="DeptDate">
    </div>
    <div class="box">
      <input type="text" id="timepicker" name="time">
    </div>
    <div class="box"><button type="submit" name="Submit" class="go_button">Go</button></div>
  </div>
</div>