响应式导航栏在768px宽度断点下列表项错乱问题排查咨询

问题原因 #

• 采用float布局排列导航项，当视口宽度缩小时，导航项内容（固定20px的文字+内边距）总宽度超过容器宽度时，float元素会自动换行，出现错乱
• 导航项设置了width: auto，仅靠min-width、max-width无法限制内容撑开的宽度，样式限制失效
• 导航列表设置了overflow: hidden，换行的导航项会被直接截断，进一步加剧错乱表现
• CSS代码存在笔误：.dropdown div的box-shadow属性多写了一个冒号，样式不生效
• .dropdown类设置的margin: -1px会导致导航项对齐偏移

修复方案 #

第一步：替换float布局为flex布局，提升响应式适配稳定性 #

修改nav ul的样式：

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: darkslateblue;
}

修改nav ul li的样式，移除float相关属性：

nav ul li {
    flex: 1;
    min-width: fit-content;
    padding-right: 5px;
}

第二步：修复样式笔误与不合理设置 #

删除.dropdown的负边距设置，修正box-shadow的多余冒号：

.dropdown {
    position: inherit;
    display: inline-block;
}
.dropdown div {
    display: none;
    position: absolute;
    background-color: darkslateblue;
    min-width: 10%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    transition: 0.1s;
}

第三步：优化小屏适配逻辑 #

修改媒体查询，缩小小屏下的文字与内边距，避免内容溢出：

@media (max-width: 768px) {
    nav ul li a, .dropdown button, .dropdown span {
        font-size: 16px;
        padding: 8px 4px;
    }
}

如果需要更小屏的适配效果，可以在更窄的断点下设置导航项垂直排列，或者接入汉堡菜单交互。

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