用Flex实现横向导航栏只需三步：容器设display: flex，子项自动横排；清除列表默认样式并设间距；美化链接并添加悬停效果。响应式时用媒体查询改flex-direction为column即可。
用 Flex 实现横向导航栏，核心就三点：给容器设 display: flex，让子项自动排成一行，再微调对齐和间距。不需要浮动、不用清除浮动，也不用计算宽度，非常直观。
1. 基础结构：HTML 搭好骨架
先写语义清晰的 HTML，用 包住无序列表，每个菜单项用 ，链接用 ：
2. Flex 布局：三行 CSS 搞定横向排列
目标是让 并排显示，去掉默认列表样式，控制间距和对齐：
- 给
ul设display: flex，它就变成 Flex 容器，子项（li）默认横向排列 - 加
list-style: none去掉圆点，margin: 0; padding: 0清除默认边距 - 给
li设margin-right: 1rem控制项间距离（最后一项可选用:last-child去掉右距）
.navbar ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
margin-right: 1rem;
}
.navbar li:last-child {
margin-right: 0;
}
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，适配竖向流 - 这样结构不变，只改布局方向，逻辑清晰，容易调试
