固定高度父div子元素溢出问题修复咨询（禁用float/flex/grid）

问题根源 #

• 所有display: inline-block属性的子容器默认vertical-align值为baseline，会按文本基线对齐而非顶部对齐，导致整体下移溢出父容器
• 行内块元素之间的HTML换行符会产生默认空白间隙，4个子容器宽度总和为100%，加上间隙后总宽度超出父容器宽度，导致部分容器被挤到下一行
• 内部的表单、标题、列表等元素未设置高度适配和垂直对齐规则，内容撑出了父容器范围

修复方案（未使用float、flex、grid属性） #

仅需在原有CSS基础上新增以下规则即可：

/* 消除行内块之间的空白间隙 */
.div_navBarContainer {
  font-size: 0;
}
/* 统一行内块子容器顶部对齐 */
.div_logoContainer, .div_linksContainer, .div_searchBarContainer, .div_signInContainer {
  vertical-align: top;
}
/* 子容器内部恢复字体大小 */
.div_navBarContainer * {
  font-size: 1.2rem;
}
/* 内部块元素高度适配父容器 */
.h3_logoName, ul, form {
  height: 100%;
  line-height: 64px; /* 父容器高度70px减去上下3px边框，实际可用高度64px，用于文本垂直居中 */
  margin: 0;
}
/* 搜索框高度适配 */
input {
  height: 80%;
  vertical-align: middle;
}
/* 登录注册区域列表元素适配 */
.div_signInContainer li {
  display: inline-block;
  height: 100%;
  vertical-align: top;
}

额外说明 #

如果不需要文本垂直居中，可删除line-height相关规则，仅保留对齐和高度适配规则即可解决溢出问题。

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