如何将包含子元素的多个div设置为Inline并排显示？

你遇到的问题很典型——给父元素设置display: inline并不能让内部的块级子元素变成行内元素并排显示，因为块级元素（比如div）的默认行为就是占据整行空间，父元素的inline属性不会覆盖子元素的display特性。

为什么你的尝试没生效？ #

当你给.parent设置display: inline时，父元素本身会变成行内元素，但它内部的.child div依然是块级元素，每个块级元素都会自动换行，所以就出现了你看到的堆叠效果。

几种可行的解决方案 #

方案1：使用Flexbox（现代布局首选）

给父元素设置display: flex，内部子元素会默认在一行排列，还能轻松控制对齐、间距等细节：

.parent {
  display: flex;
  /* 可选：子元素超出宽度时自动换行 */
  flex-wrap: wrap;
  /* 可选：设置子元素之间的间距 */
  gap: 15px;
}

方案2：给子元素设置display: inline-block

直接修改子元素的display属性，让它们变成行内块元素——既保留块级元素可设置宽高的特性，又能在同一行排列：

.child {
  display: inline-block;
  /* 可选：消除行内块元素间的默认空白间隙 */
  margin-right: -4px;
}

方案3：使用CSS Grid（适合复杂列布局）

如果需要固定列数等更规整的布局，Grid是绝佳选择：

.parent {
  display: grid;
  /* 设置3列，每列宽度自适应 */
  grid-template-columns: repeat(3, 1fr);
  /* 可选：设置列之间的间距 */
  column-gap: 15px;
}

使用以上任意一种方法后，你的三个.child div就会并排显示，内部的列表内容也会跟着在一行排列啦。

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