为何inline-block在<div>内元素上不生效？代码对比求助

你遇到的核心问题不是display: inline-block失效了，而是样式加错了元素。

第一段里，三个<p>是直接同级的，给它们设inline-block后，既保留了块级元素的宽高特性，又能像行内元素一样横向排列，所以效果正常。

但第二段里，每个<p>都被单独的<div>包裹了。<div>是默认的块级元素，不管内部内容是什么，块级元素都会独占一行宽度，三个<div>自然会纵向排列。你给<p>加的inline-block只影响它在div内部的表现，对div本身的布局没有作用，所以整体看起来是纵向的，并非inline-block失效。

根据需求，有几种简单的修复方式：

方法1：给外层div设置inline-block #

把inline-block样式加到包裹p的div上，让div变成可横向排列的元素：

.blue, .green, .red {
  /* 原有p标签样式可保留 */
}
.wrapper-div {
  display: inline-block;
}

对应的HTML：

<h1>CSS Display Property</h1>
<div class="wrapper-div">
  <p class="red">Red Paragraph </p>
</div>
<div class="wrapper-div">
  <p class="green">Green Paragraph</p>
</div>
<div class="wrapper-div">
  <p class="blue">Blue Paragraph</p>
</div>

方法2：用Flex布局（更推荐） #

给三个div的父容器设置flex布局，强制子元素横向排列：

.container {
  display: flex;
  gap: 10px; /* 可选，给元素之间添加间距 */
}
.blue, .green, .red {
  display: inline-block;
}

对应的HTML：

<h1>CSS Display Property</h1>
<div class="container">
  <div>
    <p class="red">Red Paragraph </p>
  </div>
  <div>
    <p class="green">Green Paragraph</p>
  </div>
  <div>
    <p class="blue">Blue Paragraph</p>
  </div>
</div>

方法3：去掉多余的div #

如果没有必须保留div的理由，直接使用第一段的结构即可，这是最直接的解决方案。

内容的提问来源于stack exchange，提问作者Aditya Hota