用 display: inline 或 inline-block 可使块级元素横排，但 inline 不支持宽高和上下 margin，inline-block 有基线对齐缝隙；现代推荐 flex 布局，父设 display: flex 即可自动横排，兼容性好且无间隙问题。
用 display: inline 或 display: inline-block 让元素排成一行
块级元素（比如 <div>、<p>）默认独占一行，想让它们横着排，得改显示模式。最直接的办法是设 display: inline，但要注意它会让元素失去宽高设置能力；如果需要控制宽度、内边距或垂直对齐，就得换用 display: inline-block。
常见错误现象：<div> 套 <div> 死活不并排，检查是否漏了 display 重写，或者父容器有 white-space: nowrap 之类干扰项。
-
inline：适合纯文本流场景，不能设width、height、margin-top/bottom -
inline-block：能设宽高和上下 margin，但默认有文字基线对齐带来的“缝隙”，可加vertical-align: top或父容器设font-size: 0消除 - 别忘了重置子元素的
margin和float，浮动元素不参与行内布局计算
用 flex 布局一劳永逸地横向排列
现代项目首选 display: flex，父容器设了它，子元素默认就横着排，且天然支持对齐、换行、等比伸缩等需求。兼容性上，IE10+ 支持，移动端完全没问题。
使用场景：按钮组、导航栏、表单控件水平对齐、响应式卡片行等。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: flex，子元素自动变成 flex item，无需额外样式 - 加
flex-wrap: nowrap（默认值）确保不换行；若内容超宽，可用overflow-x: auto横向滚动 - 避免在子元素上滥用
float或display: block，会破坏 flex 行为 - IE10/11 对
flex: 1解析有差异，建议用具体数值如flex: 1 1 0
为什么 float: left 现在不推荐了
float 曾是“让元素排成一行”的老办法，但它本质是为图文环绕设计的，强行用于布局会带来清除浮动、高度塌陷、响应式失效等问题。现在只要不是要兼容 IE9 及更早版本，就该避开它。
典型错误现象：父容器高度为 0，后面的内容叠上来；媒体查询里 float 切换方向后没重置，导致错位。
-
float元素脱离文档流，父容器无法感知其高度，必须用clearfix或overflow: hidden补救 - 响应式断点中，从横排切到竖排时，
float很难干净撤回，容易残留布局污染 - 与
position: absolute或transform混用时，渲染行为不可预测
注意空格、换行符和字体大小带来的“看不见的间隙”
用 inline 或 inline-block 时，HTML 源码里的换行和空格会被浏览器渲染成一个空格字符，导致元素间出现约 4px 的间隙。这不是 bug，是规范行为。
这个间隙在小图标、按钮组、评分星星等紧凑场景里特别碍眼。
- 解决方法之一：父容器设
font-size: 0，子元素再单独设所需字号 - 方法之二：HTML 中删掉元素间的换行和空格（代码可读性受损，慎用）
- 方法之三：子元素设
margin-left: -4px（不推荐，依赖固定像素，缩放或字体变化时失效） - Flex 布局完全不受此影响，这也是它更可靠的原因之一
真正麻烦的不是“怎么排成一行”，而是“排成一行后，在不同字体、缩放、输入法、甚至 Safari 的 text-rendering 设置下，是否还稳得住”。越靠近 UI 边界，越要验证真实设备上的像素级表现。
