最直接可靠的方案是给 ul 设 display: flex；需清除默认样式、用 gap 控制间距、按需设置 flex 值和 justify-content，配合 flex-wrap 与媒体查询实现响应式布局。

ul 上设 display: flex 是最直接可靠的方案

别再碰 float: left 或硬调 inline-block，现代项目里它只带来塌陷、间隙和清浮动的额外工作。直接给 ul 加 display: flex，列表项天然横向左对齐，且不脱离文档流。

关键不是“让 li 横着”，而是让容器主动管理排列逻辑：

• ul 必须清除默认样式：list-style: none; padding-left: 0; margin: 0;（padding-left: 0 尤其容易漏，会导致第一项明显右偏）
• 用 gap 控制项间距离，比在每个 li 上写 margin-right 更干净，不会污染首尾间距
• 如果需要等宽分布（比如导航菜单项均分宽度），加 flex: 1 到 li；若保持内容自适应宽度，用 flex: 0 0 auto
• IE11 支持没问题；如需兼容 IE10，补一句 display: -ms-flexbox

justify-content 怎么选才不翻车

横向排开 ≠ 一律用 space-between。这个值在项数少时极易暴露布局缺陷：

• 只有 2 个 li？space-between 会让它们死顶左右边缘，中间大片空白 —— 改用 space-around 或 flex-start + gap
• 想居中但又怕换行错位？优先设 justify-content: center，再配合 flex-wrap: wrap，比靠 text-align: center 在父容器上更可控
• 右侧对齐需求少，但真要用就写 justify-content: flex-end，别试图靠 margin-left: auto 推最后一项 —— 那是 hack，语义不清还易被后续样式覆盖

移动端横向列表千万别硬撑

小屏下强行保持横向，用户得左右拖拽，体验极差。真正该做的是提前规划断点行为：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 默认用 flex-wrap: wrap，让超长项自动换行，而不是溢出隐藏
• 仅当业务明确要求横向滚动（如标签云、商品筛选栏），才启用：overflow-x: auto + white-space: nowrap，同时确保 li 不换行、触摸目标 ≥ 44px
• 用媒体查询切换方向比 JS 更轻量：@media (max-width: 768px) { .nav-list { flex-direction: column; } }
• 别忽略 align-items: center —— 横向时它让所有 li 垂直居中；换列后若文字被截，记得在 column 模式下关掉或改用 flex-start

为什么 inline-block 还有人用？它卡在哪

它不是错，是限制太具体：适合静态、项数固定、无需响应式换行的老系统。但坑很实在：

• HTML 换行符会被渲染成约 4px 空隙 —— 不是 CSS 问题，是解析规则。删换行或设 font-size: 0 再重置子元素字号，维护成本高
• vertical-align: baseline 默认值会让文字底部对齐，导致高度不一的 li 看起来歪斜，必须显式写 vertical-align: middle
• 无法用 gap，只能靠 margin，于是总得处理 :last-child 去右距，或者用负边距 hack
• 不支持 flex-wrap，小屏换行得靠 JS 或媒体查询切 display，不如 flex 一条属性解决

真正难的不是让它们横过来，是判断什么时候该横、什么时候该折、什么时候该滚。这些决策藏在 flex-wrap、gap 和媒体查询的组合里，而不是某一行 display 属性里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！