使用flexbox制作导航栏时导航链接出现堆叠问题如何解决？

你遇到的导航链接堆叠是由两个核心问题导致的：

• 类名不匹配：HTML中ul的类名是nav_links（单下划线），但CSS中导航相关的选择器全部写的是.nav__links（双下划线），导航样式完全未生效，li默认是块级元素所以自动纵向堆叠。
• HTML存在未闭合标签：<meta charset="utf-8"、<link rel="stylesheet" href="style.css"都缺少末尾的>，存在语法错误。

修复方案 #

1. 先修正HTML语法错误：

<!-- 修正前 -->
<meta charset="utf-8"
<link rel="stylesheet" href="style.css"
<!-- 修正后 -->
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">

2. 统一类名，同时改用flex实现导航横向排列
   将CSS中所有的.nav__links改为.nav_links，替换为flex写法即可实现横向排列，后续调整对齐方式也更灵活：

/* 替换原来的.nav__links和.nav__links li相关样式即可 */
.nav_links {
    list-style: none;
    display: flex;
}
.nav_links li {
    padding: 0 20px;
}

如果需要调整导航的对齐方式，直接给.nav_links添加justify-content: center/space-between等属性即可生效。

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