现代横向导航条应使用 display: flex 布局，设 ul 为 flex 容器并清除默认样式，用 justify-content 控制对齐，gap 或相对单位 padding 实现自适应，配合 flex-wrap 换行和媒体查询+汉堡菜单适配移动端，且必须添加 viewport meta 标签。
用 display: flex 实现横向导航条的基础布局
直接用 float: left 做横向导航已经过时，容易因清除浮动不彻底导致后续内容错位，且无法原生支持居中、等分布局或换行。现代做法是把 <ul></ul> 设为 display: flex 容器，<li> 自动成为弹性子项。
关键点：
-
ul必须设list-style: none和margin: 0; padding: 0，否则默认样式会干扰对齐 -
li不需要设float或width，靠flex自动分配空间 - 若想菜单项均匀撑满容器，加
justify-content: space-between；若想居中对齐，用justify-content: center - 避免给
li写死padding-left/padding-right（比如各70px），否则小屏下必然溢出
让导航条随窗口缩放不出现横向滚动条
最常见的“自适应失败”现象是：一缩小浏览器宽度，导航栏就拉出水平滚动条。这几乎 100% 是因为用了固定像素的内边距或最小宽度限制。
正确做法：
- 把
padding改成相对单位，例如padding: 0.5rem 1rem或用gap控制项间距（ul { gap: 1rem; }） - 给
ul加flex-wrap: wrap—— 这样窄屏下菜单项会自动换行，而不是强行挤在一起溢出 - 确保外层容器（如
<nav></nav>）没设min-width或固定width，让它能随视口收缩 - 检查是否误给
a标签设了white-space: nowrap，这会让长文字无法折行
用媒体查询适配移动端（600px 断点）
纯靠 flex-wrap 换行只够应付中等窄屏，真到手机尺寸（比如 max-width: 600px），还是得收起菜单，用汉堡按钮触发展开。
实操要点：
- 默认状态下，
nav ul显示为flex，menu-toggle按钮display: none - 在
@media screen and (max-width: 600px)里：- 隐藏原
ul：nav ul { display: none; } - 显示按钮：
.menu-toggle { display: block; } - 给
nav加position: relative，方便后续用absolute定位下拉菜单
- 隐藏原
- JavaScript 只需切换
ul的display或 class，无需操作 DOM 结构
为什么 viewport meta 标签不能漏
即使 CSS 写得再完美，如果 HTML 顶部没加这行，手机浏览器会以桌面视口渲染，导致整个导航条被缩得很小、点击困难：
<meta name="viewport" content="width=device-width, initial-scale=1">
它不是可选的“增强项”，而是响应式生效的前提。没有它，所有媒体查询和 rem/em 单位都会失效。
另外注意：别在 nav 或 ul 上写 height 固定值，尤其当菜单项文字行数可能变化时 —— 高度必须由内容自然撑开，否则换行后会被截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
