如何用CSS在水平滚动图片的首张图片下方添加文本？

问题核心 #

你遇到的错位问题来自两个关键原因：

• 滚动容器设置了过大的line-height:25em，强制内部元素垂直偏移
• 文本未放在对应图片的容器内，无法和图片绑定对齐

修改后的完整代码 #

CSS 代码

* {
  margin: 0;
  padding: 0;
  line-height: inherit;
}

.horizontal_slider {
  display: block;
  width: 100%;
  overflow-x: scroll;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
  /* 移除导致错位的大line-height */
}

.horizontal_slider_video {
  display: block;
  width: 100%;
  overflow-x: hidden;
  padding: 0;
  box-sizing: border-box;
  background-color: #fff;
  line-height: 25em;
}

.horizontal_slider::-webkit-scrollbar {
  display: none;
}

/* 隐藏微软浏览器滚动条 */
.horizontal_slider {
  -ms-overflow-style: none;
}

.slider_container {
  display: block;
  white-space: nowrap;
}

.item {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top; /* 确保所有图片块顶部对齐 */
}

.item img {
  width: auto; /* 修复原代码width:px的语法错误 */
  height: 850px;
  object-fit: cover;
}

/* 新增图片下方文本样式 */
.item-caption {
  white-space: normal; /* 重置nowrap，让文本正常换行 */
  margin-top: 8px;
  font-size: 14px;
  text-align: left;
}

HTML 代码

<div class="slider_container">
  <div class="horizontal_slider">
    <div class="slider_container">
      <div style="text-align: left">
        <h2>Side by side sisters</h2>
      </div>
      <div class="item">
        <img src="https://freight.cargo.site/t/original/i/0b6e5d416b8d2666e95ad95076f5a051e7c744345a0c66f43667f08f1a2619d6/0007-copy.jpg">
        <!-- 将文本放在当前图片的容器内，与图片同级 -->
        <div class="item-caption">这是首张图片的描述文本</div>
      </div>
      <div class="item">
        <img src="https://freight.cargo.site/t/original/i/21fae0988d8a0ae94a7dabcf10286fd8fc6e0488a3801de8017c2932024f46bb/0008-copy.jpg">
      </div>
      <div class="item">
        <img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
      </div>
      <div class="item">
        <img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
      </div>
      <div class="item">
        <img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
      </div>
      <img src="https://freight.cargo.site/t/original/i/d045fce91bf44d863d7e5221f7ec9b61dbfe8d74145cb65120cbf7302f0ebbab/0006.jpg">
    </div>
  </div>
</div>

关键修改说明 #

1. 删除大行距：移除.horizontal_slider的line-height:25em，解决元素被强制垂直偏移的问题
2. 文本绑定图片：将文本放入对应图片的.item容器内，确保滚动时和图片同步，自然对齐在下方
3. 统一顶部对齐：给.item加vertical-align: top，避免inline-block元素默认基线对齐导致的错位
4. 修复文本换行：给文本容器设置white-space: normal，抵消父容器nowrap对文本排版的限制

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