css块元素变成一行显示怎么办_修改display为inline block

日期：2025-12-26 00:00 / 作者：P粉602998670

最常用方法是设 display: inline-block，因其既能设置宽高、内外边距，又能同行排列；而 inline 无法设置宽高和上下 margin，块元素默认独占一行。

把块元素变成一行显示，最常用的方法就是把 display 属性设为 inline-block。

块元素（如 div、p、h1 等）默认独占一行，而 inline 元素（如 span、a）不能设置宽高和上下 margin。inline-block 则兼顾两者：可以设 width、height、padding、margin，同时又像 inline 元素一样在一行内排列。

假设你有三个 div 想排成一行：

A
B
C

CSS 可写为：

.item {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin-right: 10px;
}

如果只是想让子元素水平排列，现代布局中还有更稳健的选择：

用 inline-block 时容易踩的坑：