最常用方法是设 display: inline-block，因其既能设置宽高、内外边距，又能同行排列；而 inline 无法设置宽高和上下 margin，块元素默认独占一行。
把块元素变成一行显示，最常用的方法就是把 display 属性设为 inline-block。
为什么用 inline-block 而不是 inline？
块元素（如 div、p、h1 等）默认独占一行，而 inline 元素（如 span、a）不能设置宽高和上下 margin。inline-block 则兼顾两者：可以设 width、height、padding、margin，同时又像 inline 元素一样在一行内排列。
- 支持设置 width / height / vertical-align
- 不会自动换行，多个 inline-block 元素默认从左到右依次排列
- 注意：元素间有空格或换行符时，会渲染出约 4px 的空白间隙（可删 HTML 空格、设父容器 font-size: 0、或用 flex 替代）
基础写法示例
假设你有三个 div 想排成一行：
<div class="item">A</div> <div class="item">B</div> <div class="item">C</div>
CSS 可写为：
立即学习“前端免费学习笔记（深入）”；
.item {
display: inline-block;
width: 100px;
height: 50px;
margin-right: 10px;
}
替代方案也值得考虑
如果只是想让子元素水平排列，现代布局中还有更稳健的选择：
- display: flex（推荐）：父容器设 flex，子项默认横向排列，无空白间隙问题，对齐、换行、间距控制更灵活
- float: left（不推荐新项目）：需清除浮动，维护成本高，已逐渐淘汰
- grid 布局：适合二维布局，单行也可用，但略重，适合复杂场景
常见问题提醒
用 inline-block 时容易踩的坑：
- 垂直对齐默认是 baseline，可能看起来“不对齐”，加 vertical-align: top/middle/bottom 可修正
- 父容器如果有 text-align: center，inline-block 子元素也会居中（这是正常行为，不是 bug）
- IE8+ 支持 inline-block，但 IE7 需要 hack（如 *display:inline; *zoom:1），现在基本不用考虑
