html - 样式内联图像和标题

Question

以下代码充当一个部分，允许用户水平滚动浏览大量图像。我想在每个图像下方放置文本。我在做这件事时遇到了严重的麻烦，非常感谢任何建议

<div class="favored" style="background-color: #F8FFFA;overflow-x:scroll; white-space: nowrap;" >
    <span>
        <img id='<?echo $user_id;?>' src="<?echo$image_path?>">
        <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
    </span>
    <span>
        <img id='<?echo $user_id;?>' src="<?echo$image_path?>">
        <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
    </span>        <span>
        <img id='<?echo $user_id;?>' src="<?echo$image_path?>">
        <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
    </span>        <span>
        <img id='<?echo $user_id;?>' src="<?echo$image_path?>">
        <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption>
    </span>
</div>

提前致谢

Answer 1

Flexbox来救援!

ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow-x: scroll;
  overflow-y: hidden;
  list-style: none;
  padding: 0;
}

ul li {
  width: 350px;
  text-align: center;
  margin: 5px;
}

<ul>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>
  <li>
    <img src="http://placehold.it/200x100">
    <p>caption</p>
  </li>

</ul>