inline-block并排显示需同时处理空白间隙和vertical-align，默认baseline对齐导致错位，推荐vertical-align:top加font-size:0父容器方案；flex需显式flex-wrap:nowrap防折行；grid必须定义grid-template-columns否则无效。
display: inline-block 能快速让块级元素同行，但空白符间隙和垂直对齐容易出问题；display: flex 更可靠，但必须加 flex-wrap: nowrap；display: grid 适合固定列数场景，漏写 grid-template-columns 就无效。
为什么 inline-block 一用就有缝隙？
不是 bug，是 HTML 源码里换行或缩进产生的空格被渲染成 4px 左右的间隙。两个 <div></div>
<div></div> 写在同一行能消除；或者给父容器设 font-size: 0，子元素再单独设 font-size（注意继承影响）。
另一个常见坑是垂直对齐：默认 vertical-align: baseline，文字多的元素会“下沉”，看起来一高一低。统一加 vertical-align: top 或 middle 更稳。
-
inline-block兼容 IE8+，无 JS 依赖，适合按钮、标签这类静态小部件 - 子元素仍保持块级特性（可设
width、padding、margin） - 别指望它自动均分宽度——要自己算
width，且记得box-sizing: border-box
flex 布局为什么总折行？
因为 flex-wrap 默认是 wrap，内容超宽就自动换行。想严格单行，父容器必须显式声明：display: flex + flex-wrap: nowrap。
子元素不用改 display，保持 block 也照常排列。但要注意：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 子元素宽度总和超过容器时，会溢出而非折行（这是预期行为，需配合
overflow或flex-shrink: 0控制） -
justify-content控制水平分布（如space-between），align-items控制垂直对齐（如center） - Safari iOS 8/9 对
flex-wrap支持不全，纯两元素并排一般没问题，但三列以上建议测试
grid 排一行必须写几列？
只写 display: grid 不会自动排成一行——必须定义列轨道，否则所有子元素堆在第一格。
横向排列常用写法：
-
grid-template-columns: repeat(3, 1fr)→ 三等分 -
grid-template-columns: auto auto auto→ 按内容宽度自适应 -
grid-template-columns: 200px 1fr→ 固定宽 + 剩余空间
gap 控制间隔，比用 margin 干净，不会影响首尾项外边距逻辑；IE11 需加前缀且不支持 gap，要用 grid-column-gap 替代。
真正卡住人的往往不是“怎么排”，而是没确认父容器是否有明确宽度、子元素是否带默认 margin（比如 <p></p>）、box-sizing 是否统一——这些细节不处理，flex 和 grid 也会掉行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
