如何使div下拉导航栏元素与a标签超链接导航栏元素尺寸位置一致

问题根源 #

差异来自三个未统一的样式规则：

• 浏览器给<button>元素内置了默认padding、背景和行高，你现有的CSS没有覆盖这部分默认属性，而<a>标签没有这类额外内置样式
• 所有导航子元素（a标签、dropdown容器）都用了inline-block布局，但未统一设置vertical-align属性，inline-block元素默认基线对齐，自然会出现y轴位置偏差
• .nav下的直接子a标签和.dropbtn没有统一盒模型参数，二者内容高度、内边距不一致

修复方案 #

直接把以下CSS补充覆盖到原有对应规则中即可：

/* 统一.nav下所有直接子元素的对齐和基础盒模型 */
.nav > * {
  vertical-align: middle;
  line-height: 1;
  padding: 8px 12px; /* 数值可根据你需要的导航高度自行调整，保持一致即可 */
}

/* 重置button默认样式，和a标签完全对齐 */
.dropdown .dropbtn {
  background: transparent; /* 清除button默认灰色背景 */
  padding: 8px 12px; /* 和上方a标签padding保持完全一致 */
  cursor: pointer; /* 交互和a标签统一，悬停显示手型 */
  line-height: 1;
  border: none;
  outline: none;
  color: brown;
  font-family: courier;
  font-size: 15px;
}

/* 修正dropdown容器属性，避免下拉菜单被截断 */
.dropdown {
  overflow: visible; /* 原有overflow:hidden会裁剪绝对定位的下拉菜单 */
  position: relative; /* 让下拉菜单相对于当前容器定位，不会偏移 */
}

额外修正点：把HTML中button标签内的文字和标签贴紧，避免多余换行空格导致的内容偏移，比如写成<button class="dropbtn">Members</button>即可，不要在标签内留多余换行。
如果需要搜索框和导航栏保持同高度对齐，给.topnav也加上display: inline-block; vertical-align: middle;即可，不需要用float属性，可以避免高度塌陷问题。

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