以下代码充当一个部分,允许用户水平滚动浏览大量图像。我想在每个图像下方放置文本。我在做这件事时遇到了严重的麻烦,非常感谢任何建议
<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>
提前致谢
最佳答案
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>
关于html - 样式内联图像和标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42862809/