17370845950

最常用方法是设 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 想排成一行：

A
B
C

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），现在基本不用考虑