上周帮朋友改一个企业站，他的导航用float: left写了八行，每个链接都加margin-right: 30px，最后一项总是掉下去。我直接换成flex，三分钟解决。所以别把导航栏想复杂，它就是水平排列的链接列表，外加一点视觉分隔。

最干净的写法是<nav>包一个无序列表，每个列表项里放<a>。为什么不用<div>？因为屏幕阅读器能识别<nav>和<ul>，而且默认的列表样式去掉圆点后，结构依然清晰。看这段代码：

<nav class="main-nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">文档</a></li> <li><a href="#">工具</a></li> <li><a href="#">关于</a></li> </ul> </nav>

现在它只是竖直的列表。接下来用CSS把它变成横向。有人喜欢display: inline-block，但那样会留下恼人的空白间隙。我更推荐flex，一行display: flex;就搞定，而且天然支持对齐和间距。

这是我的惯用写法，直接抄就行：

.main-nav ul {  display: flex; gap: 2rem; /* 比margin干净，不用管最后一个元素 */ list-style: none; /* 去掉圆点 */ padding: 0; margin: 0; } .main-nav a {  text-decoration: none; color: #1e2b3c; font-weight: 500; padding: 0.5rem 0.25rem; border-bottom: 2px solid transparent; transition: border-color 0.2s; } .main-nav a:hover {  border-bottom-color: #2d7ee7; }

注意gap在flex里是控制子项间距的，比给每个li加margin-right再手动去掉最后一个要省心。另外border-bottom做悬停下划线，不会引起布局跳动——如果用text-decoration或者改变字体粗细，鼠标一上去导航栏就会抖，那感觉特别糙。

移动端才是导航栏的照妖镜。屏幕一窄，四个链接挤成两行，或者直接溢出。最简单的应对是媒体查询里把flex-direction改成column，再加个汉堡按钮。不过如果你不想写JS，也可以用details和summary做纯CSS折叠，虽然样式丑点但能用。

我自己的博客导航就用了极简方案：窄屏下只显示“菜单”两个字，点击后展开竖直列表。核心代码就三行媒体查询：

@media (max-width: 600px) {  .main-nav ul {  flex-direction: column; gap: 0.5rem; } }

当然，这会把导航栏撑得很高。更常见的做法是隐藏ul，用:checked配合label来切换。但那是另一个话题了，今天不跑题。

导航栏的颜色和间距决定了整个网站的调性。我试过用纯黑背景加白色文字，对比太强，看久了眼睛累。后来改成深蓝灰（#1e2b3c）配浅灰文字，悬停时文字变白并加一条亮蓝下划线，舒服很多。间距上，gap: 2rem在桌面端刚好，移动端可以缩到1rem。别用justify-content: space-between把链接推到两边，那样中间空一大块，导航会显得散。

↑ 上面这个就是按文中样式渲染的导航条，鼠标放上去有下划线。

还有一点容易被忽略：当前页面的高亮。很多人用.active类加个背景色，但忘了aria-current="page"。屏幕阅读器用户需要知道哪个是当前项。代码很简单：<a href="/docs" aria-current="page">文档</a>，然后CSS里[aria-current="page"]加下划线或者加粗。这样既好看又无障碍。

最后说个我踩过的坑：导航栏里如果放了logo图片，记得给img设max-height，不然图片会把导航撑变形。我一般用height: 40px;配合width: auto;，让图片自己缩放。

导航栏没什么黑魔法，结构干净、用flex、注意移动端和可访问性，基本就稳了。别为了炫技写一堆绝对定位，后期改起来想哭。如果你还在用表格做导航，赶紧换了吧——那不是2025年该干的事。