如何在图片下方添加每张图片的文字描述？ [关闭]答案

【问题标题】：How can I add a text description of each image below the image? [closed]如何在图片下方添加每张图片的文字描述？ [关闭]
【发布时间】：2026-01-24 05:45:01
【问题描述】：

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

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

我写的代码如下。

感谢您的帮助！

             <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;
  }

【问题讨论】：

欢迎来到 Stack Overflow！预计您至少会尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
另请注意，您的 HTML 无效。 ul 只能将 li 作为直接子代

标签： html css text

【解决方案1】：

问题询问如何在链接下方显示说明。链接是img。

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

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

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

现在我们可以在链接之后添加文本，也就是在结束标记之后。这个 sn-p 将文本放在一个 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>

【讨论】：

【解决方案2】：

 <section>
          <ul class="film_strip" style="list-style:none;">
                <li><a href="drawing.html"><img src="https://picsum.photos/id/237/200/300" width="130" height="130" alt="Learn to draw" /></a><br>Description 1</li>
                <li><a href="art.html"><img src="https://picsum.photos/id/238/200/300" width="130" height="130" alt="art Design and creation" /></a><br>Description 2</li>
                <li><a href="design.html"><img src="https://picsum.photos/id/239/200/300" width="130" height="130" alt="design" /></a><br>Description 3</li>
         </ul>
  </section>

【讨论】：