[分享]css列表中图片下面文字

 在网站开发中，经常需要用到列表和图片的结合展示。而如何在列表中实现图片下面的文字呢？这里我们需要使用CSS来控制样式。在HTML代码中，我们可以使用ul和li标签来生成列表，同时在li标签中添加im...

 在网站开发中，经常需要用到列表和图片的结合展示。而如何在列表中实现图片下面的文字呢？
这里我们需要使用CSS来控制样式。在HTML代码中，我们可以使用ul和li标签来生成列表，同时在li标签中添加img标签来插入图片。

 <ul>
    <li>
      <img src="image.jpg" alt="图片">
      <p>图片下面的文字</p>
    </li>
    <li>
      <img src="image2.jpg" alt="图片2">
      <p>图片2下面的文字</p>
    </li>
  </ul> 

然而，如果不加CSS样式，这样的排版会显得非常凌乱。因此，我们需要为p标签和img标签分别设置样式，让它们之间有一个合理的间距。

 ul li {
    list-style: none;
    margin-bottom: 20px;
  }

  img {
    display: block; /* 将图片转换为块级元素 */
    margin-bottom: 10px;
  }

  p {
    margin: 0;
    font-size: 14px;
    color: #333;
  } 

以上代码中，我们将li的样式设置为无序列表样式，并且增加了一个margin-bottom属性，用来控制li之间的间距。同时，我们将img标签的display属性设置为块级元素，以便让它们占据一行；并且加入了一个margin-bottom属性，用来和下面的文字分别。最后，我们将p标签的margin属性设为0，防止出现多余的间隔。
通过以上的CSS样式设置，我们就可以获得一个清晰、美观的图片列表了。