如何实现图片水平排列？已用inline-block仍垂直的问题求助

嘿，我来帮你搞定这个排版问题！你现在遇到的核心问题是HTML结构和CSS布局的搭配不对，导致图片没法水平排列。咱们一步步来修正：

问题根源分析 #

你现在把所有图片和对应的标题都塞进了同一个<figure>标签里，而且这个父<figure>还设置了width:100%，再加上每个<figcaption>是display:block（会独占一行），这就导致每个图片和标题都会依次换行，最终变成垂直堆叠的效果。

修正方案 #

咱们需要把每个图片+标题的组合拆成独立的<figure>单元，再用合适的布局让这些单元水平排列。下面是具体的代码调整：

修正后的HTML #

<!-- 新增一个容器来包裹所有独立的figure单元 -->
<div class="figure-container">
  <figure class="item">
    <img src="./img/facebook.png" />
    <figcaption class="caption">Facebook</figcaption>
  </figure>
  <figure class="item">
    <img src="./img/insta.png" />
    <figcaption class="caption">Instagram</figcaption>
  </figure>
  <figure class="item">
    <img src="./img/telefone.png" />
    <figcaption class="caption">Telefone</figcaption>
  </figure>
  <figure class="item">
    <img src="./img/email.png" />
    <figcaption class="caption">Email</figcaption>
  </figure>
</div>

修正后的CSS #

/* 用flex布局让子单元水平排列，支持自动换行适配屏幕 */
.figure-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* 可选：给每个单元之间添加间距，提升美观度 */
  justify-content: center; /* 可选：让所有单元在容器内水平居中 */
}

figure.item {
  color: #676767;
  background-color: #ffffff;
  width: auto; /* 去掉原来的100%，让宽度由内容决定 */
  margin: 0;
  text-align: center;
  /* 如果不想用flex，也可以保留display: inline-block; 配合父容器的text-align: center; 使用 */
}

.item img {
  width: 100px;
  height: 100px;
}

.caption {
  display: block; /* 保留这个属性，确保标题始终在图片下方 */
}

两种布局方式可选 #

1. Flex布局（推荐）：上面的代码用了flex，它能轻松实现水平排列，还支持自动换行，适配不同屏幕尺寸，布局控制更灵活。
2. Inline-block替代方案：如果你不想用flex，可以把.figure-container的样式改成：

.figure-container {
  text-align: center; /* 让inline-block元素水平居中 */
}

figure.item {
  display: inline-block;
  /* 其他样式保持不变 */
}

这样调整后，每个图片和对应的标题会组成一个独立的小单元，所有单元水平排列，标题也会乖乖待在对应图片的下方啦！

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