<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 6 年前。
css - 用 <li> 显示包含 <img> 的文本
标签 css html image html-lists
我一直在尝试在图像下方或上方显示文本，如下所示:
目前，我坚持只显示图像(给出的示例):
我无法使用 W3schools 提供的确切代码，因为我的缩略图会展开并在单击时切换到响应式轮播。我只希望名称与缩略图一起出现。我无法发布我的代码，所以我上传了一张带有 li> 标签的图片:
<div class="container">
<ul id="myGallery">
<li><img src="link.png" /></li>
<li><img src="link.png" /></li>
<li><img src="link.png" /></li>
<li><img src="link.png" /></li>
<li><img src="link.png" /></li>
</ul>
</div>
最佳答案
您可以简单地使用 flex 来做到这一点。
类似下面的内容
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
ul li {
margin: 0 5px 5px 0;
text-align: center;
border: 1px solid #000;
}<div class="container">
<ul id="myGallery">
<li>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<p>First image</p>
</li>
<li>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<p>Second image</p>
</li>
<li>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<p>Third image</p>
</li>
<li>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<p>Fourth image</p>
</li>
</ul>
</div>第二种方法，使用figure。
类似下面的内容
/*figure approach*/
.figures {
display: flex;
flex-wrap: wrap;
}
figure {
margin: 0;
margin-right: 5px;
text-align: center;
border: 1px solid #000;
}<div class="figures">
<figure>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<figcaption>First image</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<figcaption>Second image</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/100/100/nature/1/" width="100px" height="100px" />
<figcaption>Third image</figcaption>
</figure>
<figure>
<img src="http://lorempixel.com/100/100/nature/2/" width="100px" height="100px" />
<figcaption>Fourth image</figcaption>
</figure>
</div>更新
问题 jsfiddle - https://jsfiddle.net/raw9b1fj/2
解决方案 jsfiddle - https://jsfiddle.net/raw9b1fj/4/
关于css - 用 <li> 显示包含 <img> 的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41121293/