实现4个输入框等宽浮动适配屏幕且背景填充完整的方法

嘿，我来帮你搞定这两个头疼的问题！咱们先拆解问题，再逐个解决：

问题1：父容器黑色背景无法包裹浮动元素 #

这个问题的根源是浮动元素会脱离正常文档流，导致父容器计算高度时完全忽略它们，所以背景就“塌”下去了。解决这个最稳妥的方法是给包含浮动元素的容器添加「清除浮动」的样式，推荐用clearfix伪元素方案，比overflow:hidden更灵活（不会意外截断溢出内容）。

问题2：4个输入框等宽等间距自适应布局 #

原来的float布局很难实现自适应等宽，咱们直接改用现代CSS布局方案——Flexbox，它天生就是为这种弹性自适应场景设计的，不用写复杂的百分比计算，也能完美适配不同屏幕尺寸。

修改后的完整代码 #

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; 
  /* 让按钮在小屏幕上也保持合适的大小 */
  flex-shrink: 0;
}
/* 清除浮动的clearfix方案（兼容旧布局场景） */
.box_container::after {
  content: "";
  display: table;
  clear: both;
}
/* 改用Flexbox实现自适应布局 */
.box_container {
  display: flex;
  gap: 15px; /* 控制元素之间的间距，自适应时会自动调整 */
  align-items: center; /* 让输入框和按钮垂直居中对齐 */
}
.box {
  /* 让前4个输入框容器平分可用宽度 */
  flex: 1;
}
.box input {
  width: 100%; /* 输入框填满父容器，实现等宽 */
  box-sizing: border-box; /* 避免padding/border撑大宽度 */
  padding: 8px; /* 给输入框加内边距提升体验 */
}

HTML部分（无需大改，保持结构即可）

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

关键修改说明 #

1. 清除浮动：给.box_container添加了::after伪元素，强制容器包含所有浮动元素（如果后续还是用float的话也能生效，但这里我们改用了Flexbox，其实Flexbox本身不会有高度塌陷问题，不过加上clearfix更保险）。
2. Flexbox布局：
   • .box_container设置display:flex，把所有子元素变成弹性项；
   • gap:15px直接设置元素间的间距，不用给每个元素加margin，更简洁；
   • 前4个.box设置flex:1，表示它们会平分容器的可用宽度，实现自适应等宽；
   • 输入框设置width:100%和box-sizing:border-box，确保填满父容器且不会溢出；
   • 按钮设置flex-shrink:0，避免它在小屏幕上被压缩变形。

这样修改后，不管屏幕尺寸怎么变，四个输入框都会自动平分宽度，间距保持一致，父容器的黑色背景也能完全包裹所有内容啦！

内容的提问来源于stack exchange，提问作者Tom