如何将输入框的底部边框与对应标签的底部对齐？

我明白你想让输入框的底部边框和标签的底部完全对齐，之前调高度没得到一致效果确实有点烦。咱们从布局和对齐逻辑入手来解决这个问题：

问题根源 #

你的容器用了flex-direction: row，但默认的align-items是stretch，再加上给标签设置了固定的height:55%，输入框没有统一的高度控制，导致两者的底部自然对不齐。

修改方案 #

我们通过调整flex对齐方式、统一元素的垂直布局规则来实现对齐：

修改后的CSS代码

#options_body_search { 
  width: 100%; 
  height: 3vh; 
  margin: 1vh 0 0.8vh 0; 
}
#options_body_search .container { 
  display: flex; 
  flex-direction: row; 
  align-items: flex-end; /* 关键：让子元素在容器底部对齐 */
  width: 70%; 
  height: 100%; 
  margin: 0 auto; 
}
#options_body_search label { 
  display: block; 
  width: 22.5%; 
  /* 去掉固定height，用padding控制垂直内边距，同时让标签高度和容器一致 */
  padding: 0.5vh; 
  font-size: 0.7vw; 
  font-weight: bolder; 
  background: #1C57A5; 
  color: #FDFFFC; 
  border-top-left-radius: 5px; 
  border-bottom-left-radius: 5px;
  box-sizing: border-box; /* 确保padding不会撑大元素 */
}
#options_body_search input { 
  display: block; 
  font-size: 0.7vw; 
  border: none; 
  border-bottom: 2px #1C57A5 solid;
  height: calc(100% - 0.5vh*2); /* 减去标签的上下padding，和标签的内容区高度对齐 */
  box-sizing: border-box;
}
#options_body_search input::placeholder { 
  font-size: 0.7vw; 
}

关键改动说明

• 给.container添加align-items: flex-end：让flex容器里的label和input都靠底部对齐，这是实现底部对齐的核心。
• 去掉label的固定height，改用box-sizing: border-box确保padding不会额外增加元素高度，让label的高度和容器一致。
• 给input设置height: calc(100% - 0.5vh*2)：减去label的上下padding值，让input的底部边框刚好和label的底部边缘对齐。
• 给input也加上box-sizing: border-box：避免边框和padding影响元素的实际高度计算。

保持原HTML不变

<div id="options_body_search">
  <div class="container">
    <label for="global_search">Recherche:</label>
    <input id="global_search" type="text" placeholder="Rechercher dans toutes les colonnes" size="35">
  </div>
</div>

这样调整后，不管容器高度怎么变化，输入框的底部边框都会和标签的底部精准对齐，渲染效果也会更一致。

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