如何使下拉按钮与导航栏（navbar）其余部分对齐

我基于W3Schools的代码框架实现导航栏，但遇到下拉按钮和导航栏不在同一水平线的问题，效果如下：

相关的导航栏HTML及对应CSS代码已整理归档。

解决思路及方案 #

1. 统一垂直对齐规则 #

给导航栏内所有元素（包括下拉按钮容器）添加垂直对齐属性，确保它们在同一基线对齐：

.navbar li, .dropdown {
  vertical-align: middle;
}

2. 重置默认内外边距 #

浏览器会给列表项、按钮这类元素自带默认的margin和padding，容易导致错位，统一重置后再自定义样式：

.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar li, .dropdown button {
  margin: 0;
  padding: 10px 15px; /* 数值可根据你的导航栏高度调整 */
}

3. 修正下拉容器的显示模式 #

将下拉按钮的容器设为inline-block，让它和导航栏其他元素保持同行布局：

.dropdown {
  display: inline-block;
}

4. 统一行高 #

让导航栏的行高和元素高度匹配，避免因行高差异导致的垂直偏移：

.navbar {
  line-height: 40px; /* 数值与你的导航栏高度保持一致 */
}

.dropdown button {
  line-height: inherit;
}

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