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