时间戳

首页 > 解决方案 > 如何在图片下方添加每张图片的文字描述？

html - 如何在图片下方添加每张图片的文字描述？

问题描述

我目前在我的网站上显示图像，这些图像也是指向不同页面的链接。

如何在每个可点击链接下方添加文字说明？

我写的代码如下。

谢谢您的帮助！

             <section>
                <ul class="film_strip">
                    <a href="drawing.html"><li><img src="Img\drawing.png" width="130" height="130" alt="Learn to draw" /></li></a>
                    <a href="art.html"><li><img src="Img\art.png" width="130" height="130" alt="art Design and creation" /></li></a>
                    <a href="design.html"><li><img src="Img\designart.png" width="130" height="130" alt="design" /></li></a>
                </ul>
            </section>

.film_strip li {
    float: left;
    list-style-type: none;
  }

.film_strip li img {
    float: left;
    background: #DEE0E3;
    padding: 10px;
    margin: 5px;
    border: 1px solid #AAA;
    color: #3C3C3D;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
  }

标签： htmlcsstext

解决方案

该问题询问如何在链接下方显示描述。链接是img。

首先要注意给定代码中的几个错误：

  • 无序列表 (ul) 元素只有列表 (li) 元素作为其子元素，因此锚 (a) 元素必须嵌套在 li 内
  • imgs 的 CSS 有 4 个适用于文本的设置。img 元素本身没有子元素，因此文本的样式与它们无关。

然后要注意一种可能的不妥之处——使用浮点数。虽然它可以工作，但 li 元素在一条线上彼此相邻，float 最初并非用于此目的。使用 inline-block 可能更可取。请参阅CSS 中使用 display:inline-block vs float:left 的优势以讨论此问题。

现在我们可以在链接之后添加文本，也就是在结束标签之后。这个片段将文本放在一个 div 中（如果描述实际上包含其他元素类型，这会提供灵活性），并且为 img 提供的与文本相关的 CSS 被移动到这个 div。

.film_strip li {
  display: inline-block;
  list-style-type: none;
}

.film_strip li img {
  float: left;
  background: #DEE0E3;
  padding: 10px;
  margin: 5px;
  border: 1px solid #AAA;
}

.film_strip li div {
  color: #3C3C3D;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}
<section>
  <ul class="film_strip">
    <li>
      <a href="drawing.html"><img src="https://picsum.photos/id/1015/200/300" width="130" height="130" alt="Learn to draw" /></a>
      <div>Drawing</div>
    </li>
    <li>
      <a href="art.html"><img src="https://picsum.photos/id/1015/200/300" width="130" height="130" alt="art Design and creation" /></a>
      <div>Art</div>
    </li>
    <li>
      <a href="design.html"><img src="https://picsum.photos/id/1015/200/300" width="130" height="130" alt="design" /></a>
      <div>Design</div>
    </li>
  </ul>
</section>

推荐阅读