css如何让li并排显示图片

CSS（层叠样式表）是用于定义网页上元素样式的语言，它可以让我们更简单高效地管理网页布局、颜色、字体等元素，为用户呈现更漂亮的网页。在这里，我们将学习如何使用CSS让li并排显示图片。

  <ul>
    <li><img src="image1.jpg" alt="image1"></li>
    <li><img src="image2.jpg" alt="image2"></li>
    <li><img src="image3.jpg" alt="image3"></li>
  </ul>

首先，在HTML中，我们使用<ul>和<li>标签来创建一个无序列表，并且在每个<li>中插入一张图片。接着，在CSS中，我们可以使用以下代码来设置列表的样式：

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    width: 33.33%
  }
  img {
    width: 100%;
    height: auto;
  }

首先，我们使用了list-style: none; 去掉了列表默认的圆点。然后，我们将<li>设置为inline-block，这样就可以让列表项横向排列。接下来，我们使用width: 33.33%来设置每个列表项所占据的宽度为1/3，这样就可以让三张图片并排显示。最后，我们使用了width: 100%和height: auto来设置图片的宽度自适应，高度自动排布。

现在，我们已经成功地让li并排显示图片了。使用CSS，我们可以创建更为复杂的网格布局，实现更为美观的设计效果。