用Flex实现横向导航栏只需三步：容器设display: flex，子项自动横排；清除列表默认样式并设间距；美化链接并添加悬停效果。响应式时用媒体查询改flex-direction为column即可。
用 Flex 实现横向导航栏，核心就三点：给容器设 display: flex，让子项自动排成一行，再微调对齐和间距。不需要浮动、不用清除浮动，也不用计算宽度，非常直观。
1. 基础结构：HTML 搭好骨架
先写语义清晰的 HTML，用 <nav> 包住无序列表，每个菜单项用 <li>，链接用 <a>：
<nav class="navbar"><br> <ul><br> <li><a href="#home">首页</a></li><br> <li><a href="#about">关于</a></li><br> <li><a href="#services">服务</a></li><br> <li><a href="#contact">联系</a></li><br> </ul><br></nav>
2. Flex 布局：三行 CSS 搞定横向排列
目标是让 <li> 并排显示，去掉默认列表样式，控制间距和对齐：
- 给
ul设display: flex，它就变成 Flex 容器，子项（li）默认横向排列 - 加
list-style: none去掉圆点，margin: 0; padding: 0清除默认边距 - 给
li设margin-right: 1rem控制项间距离（最后一项可选用:last-child去掉右距）
.navbar ul {<br> display: flex;<br> list-style: none;<br> margin: 0;<br> padding: 0;<br>}<br><br>.navbar li {<br> margin-right: 1rem;<br>}<br><br>.navbar li:last-child {<br> margin-right: 0;<br>}
3. 美化与交互：加点实用细节
纯布局只是开始，加几行就能提升体验：
立即学习“前端免费学习笔记（深入）”；
-
a标签默认有下划线且颜色偏蓝，建议重置：text-decoration: none; color: inherit; - 让点击区域更大更友好：给
a加padding: 0.75rem 1rem，并设display: block - 鼠标悬停时加背景或文字变色：
.navbar a:hover { background: #eee; border-radius: 4px; } - 如果想让导航居中或靠右，直接在
ul上加justify-content: center或flex-end
4. 响应式小提示：手机上收起菜单？先做好基础再加媒体查询
新手不必一上来就做汉堡菜单。先把桌面端 Flex 导航写稳，再用 @media 在小屏下改成竖排：
- 比如加一句：
@media (max-width: 768px) { .navbar ul { flex-direction: column; } } - 同时把
li的margin-right改成margin-bottom，适配竖向流 - 这样结构不变，只改布局方向，逻辑清晰，容易调试
