最直接方法是给设display: flex并配合flex-wrap: nowrap、list-style: none和margin: 0，避免浮动塌陷与维护难题，推荐使用gap控制间距而非margin-right。
用 display: flex 最直接，但得关掉默认换行
浏览器默认把 <li> 当成块级元素，纵向堆叠是正常行为。改成横向，核心就是让父容器（通常是 <ul></ul>）变成弹性容器，并让子项不折行。
关键操作有三步：
- 给
<ul></ul>加display: flex - 加上
flex-wrap: nowrap（否则小屏幕可能意外折行） - 去掉
<li>的默认列表样式和上下 margin：加list-style: none和margin: 0
示例片段：
<ul style="display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0;"> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul>
float: left 能用但不推荐，尤其在现代项目里
老式写法靠 float: left 拉平 <li>，但它会脱离文档流，父容器容易塌陷——必须手动清浮动（比如加 overflow: hidden 或伪元素），维护成本高。
立即学习“前端免费学习笔记（深入）”；
更麻烦的是，float 对齐、间距控制不如 flex 直观，且在响应式场景下容易错位。除非要兼容 IE9 及更早版本，否则没必要碰它。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
常见错误现象：<ul></ul> 高度为 0，导航条“消失”——大概率是忘了清浮动。
横向间距和对齐，别只靠 margin
很多人习惯给每个 <li> 加 margin-right 来分隔，结果最后一个项多出多余空白。更干净的做法是：
- 用
gap: 1rem（写在<ul></ul>上），Flexbox 原生支持，自动避开首尾 - 或用
justify-content: space-between / space-around控制整体分布 - 如果需要等宽自适应，加
flex: 1到<li>，但注意这会让文字居中而非左对齐
注意：gap 在 Safari 旧版本（-webkit-gap 前缀。
响应式断点一加，flex-direction: column 就得备着
横向导航在手机上通常要收成汉堡菜单或纵向排列。这时候不能只改 display，得切回竖向布局：
- 媒体查询里把
<ul></ul>的flex-direction改成column - 同时恢复
width: 100%和必要 padding，否则项可能挤在左侧 - 如果用了
gap，它在column下依然生效，不用额外处理
容易被忽略的点：没重置 justify-content，导致纵向时文字右对齐或分散；或者忘了隐藏桌面端的下划线/悬停效果，移动端点按体验变差。
