现代横向导航条应使用 display: flex 布局，设 ul 为 flex 容器并清除默认样式，用 justify-content 控制对齐，gap 或相对单位 padding 实现自适应，配合 flex-wrap 换行和媒体查询+汉堡菜单适配移动端，且必须添加 viewport meta 标签。

用 display: flex 实现横向导航条的基础布局

直接用 float: left 做横向导航已经过时，容易因清除浮动不彻底导致后续内容错位，且无法原生支持居中、等分布局或换行。现代做法是把 <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% 是因为用了固定像素的内边距或最小宽度限制。

正确做法：

立即学习“前端免费学习笔记（深入）”；

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 把 padding 改成相对单位，例如 padding: 0.5rem 1rem 或用 gap 控制项间距（ul { gap: 1rem; }）
• 给 ul 加 flex-wrap: wrap —— 这样窄屏下菜单项会自动换行，而不是强行挤在一起溢出
• 确保外层容器（如 <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 固定值，尤其当菜单项文字行数可能变化时 —— 高度必须由内容自然撑开，否则换行后会被截断。