导航栏按钮不跳转主因是href为空或误用“#”，应按语义选（跳转）或<button>（交互），并确保移动端点击区域≥44×44px、Flex布局防换行、可访问性达标。
导航栏按钮点击后不跳转，检查 href 是否为空或写错
最常见的问题是按钮点不动——其实根本不是按钮，而是用了 <a> 标签但 href 没填，或者填了 href="#" 却没阻止默认行为。浏览器会跳到页面顶部，看起来像“没反应”。
真实场景里，你要跳转到首页，就写 href="/"；跳转到联系页，就写 href="/contact.html"；如果只是触发 JS（比如展开菜单），必须加 href="javascript:void(0)" 或干脆用 <button> 标签代替。
-
href="#"会触发页面滚动，慎用；真要用，JS 中必须调event.preventDefault() - 相对路径容易出错：当前页是
/blog/post.html，写href="about.html"会请求/blog/about.html，而不是根目录下的/about.html，此时应写href="/about.html" - 如果用了前端路由（如 React Router），
<a>会强制刷新页面，该用<Link>组件
用 <button> 还是 <a>？看语义和用途
导航栏里的条目本质是“跳转入口”，语义上属于链接，优先用 <a>。只有两种情况才该换 <button>：一是纯交互操作（如切换暗色模式、打开侧边栏），二是这个按钮不对应任何 URL 路径。
-
<a href="/products">产品</a>✅ 正确，可被搜索引擎抓取，支持右键“在新标签页打开” -
<button onclick="toggleMenu()">菜单</button>✅ 正确，无跳转意图 -
<a href="#" onclick="toggleMenu()">菜单</a>❌ 不推荐，破坏可访问性，键盘用户按 Enter 会跳顶
CSS 样式让导航按钮排成一行却换行了
原因通常是父容器没设 display: flex，或子元素用了 display: block 默认占满整行。Flex 布局是最稳的方案，但要注意几个细节：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给导航容器加
display: flex和flex-wrap: nowrap（防止小屏下折行） - 每个
<a>或<button>设white-space: nowrap，避免文字在窄屏中被硬拆 - 如果用了
float或inline-block，注意元素间有空格会生成间隙，要么删 HTML 空格，要么设父容器font-size: 0再重置子元素字号
移动端点击区域太小，导致按钮难点
触屏设备要求最小点击区域 ≥ 44×44px，但很多 CSS 只设了 padding: 8px 16px，文字一缩就只剩 20px 高。这不是“样式丑”的问题，是可用性缺陷。
立即学习“前端免费学习笔记（深入）”；
- 直接给导航项加
min-height: 44px，再配合padding保证内边距 - 用
line-height控制垂直居中时，确保它不小于 44px；否则文字会被截断 - 别依赖
font-size推算高度——不同字体渲染高度差异大，实测为准
复杂点在于，同一套导航要同时满足桌面悬停反馈、移动端点击识别、键盘 Tab 顺序、屏幕阅读器朗读——这些不是锦上添花，是上线前必须验证的基本项。
