添加Dropdown菜单后导航链接错位（左侧链接右移）求助

数据老陈

2026-7-6

导航栏下拉菜单错位问题修复方案

问题原因

你的导航栏中，普通链接<a>设置了display: inline-block，但下拉菜单容器.dropdown是默认的display: block，块级元素的布局规则会打破行内元素的排列逻辑，导致和其他导航项对齐异常，出现左侧链接被推挤的错位情况。

核心修复方案

修改.dropdown的CSS样式，将其设置为inline-block，和其他导航项保持一致的布局规则：

/* The dropdown container */
.dropdown {
    overflow: hidden;
    display: inline-block; /* 添加该行，统一布局方式 */
}

对齐细节优化（可选）

如果修复后按钮与其他导航文字仍有细微垂直错位，可给下拉按钮添加垂直对齐属性，确保视觉上完全一致：

/* Dropdown button */
.dropdown .dropbtn {
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    padding: 0 14px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    vertical-align: middle; /* 添加垂直对齐 */
}