Flexbox实现HTML列表横向标签的核心是结构干净、间距可控、文字不折行、点击区域完整：清除ul默认list-style/padding/margin，li内a设display:block和text-decoration:none；ul设display:flex/white-space:nowrap，用gap控制间距，justify-content:center居中，外层div加overflow-x:auto支持响应式滚动。
用 Flexbox 把 HTML 列表（<ul><li>）做成横向标签列表，核心不是“怎么让它横”，而是让结构干净、间距可控、文字不折行、点击区域完整。现代项目直接走 display: flex 路线，省掉浮动塌陷、inline-block 间隙这些老问题。
清除默认样式是第一步
浏览器会给 <ul> 加缩进和圆点，<li> 默认是块级但带上下间距。不清理，横排后还会留白、错位。
-
ul上设list-style: none; padding: 0; margin: 0; -
li里包裹的a标签必须设display: block;，否则点击热区只覆盖文字，不是整个标签 - 顺便给
a去掉下划线：text-decoration: none;
Flex 容器设置要到位
在 <ul> 上启用 Flex，并控制好主轴和换行行为：
-
display: flex;—— 启用弹性布局（IE10+ 需加-ms-flexbox前缀） -
flex-wrap: nowrap;—— 防止小屏下自动换行（默认不换，显式写上更稳妥） -
white-space: nowrap;—— 加在li或a上，避免长文本换行挤乱布局
间距和对齐用 gap 和 justify-content
别再用 margin-right 给每个 li 手动加边距，容易漏掉最后一个或首尾多出空隙。
立即学习“前端免费学习笔记（深入）”；
- 统一用
gap: 12px;控制项间距离，简洁稳定（现代浏览器全支持，无需前缀） - 整体居中？加
justify-content: center;；左对齐不用设，默认就是flex-start - 如果右边要放搜索/登录按钮，给它加
margin-left: auto;，自动推到最右
响应式滚动适配窄屏
当标签太多、屏幕太小，与其强行压缩或换行，不如允许横向滚动：
- 把
<ul>包进一个外层<div class="nav-scroller"> - 给这个外层设
overflow-x: auto;和scrollbar-width: none;（Firefox）或-webkit-scrollbar隐藏滚动条 - 确保内层
ul有white-space: nowrap;，防止内容被截断或换行
