[分享]css中如何用ulli放置图片

CSS是前端开发中必备技能，下面我们来学习一下CSS中如何使用ul li放置图片。首先，我们需要创建一个ul列表，使用ul标签包裹多个li标签。每个li标签代表一个列表项。例如： 接着，我们需...

CSS是前端开发中必备技能，下面我们来学习一下CSS中如何使用ul li放置图片。

首先，我们需要创建一个ul列表，使用ul标签包裹多个li标签。每个li标签代表一个列表项。例如：

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul> 

接着，我们需要在每个li标签中添加一个img标签，用于加入图片。例如：

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

现在的列表里已经包含了三个图片，但是它们还没有被排列好。接下来就是使用CSS设置图片的排列方式。

首先，我们可以将ul列表设置为display: flex;，让它的子元素li自动排列。例如：

<style>
  ul {
    display: flex;
  }
  li {
    list-style: none;
  }
</style> 

其中，list-style: none;用于将li标签的默认样式去掉。

接着，我们可以使用justify-content和align-items属性分别设置li标签的水平和垂直对齐方式。例如：

<style>
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  li {
    list-style: none;
    margin: 0 10px;
  }
</style> 

其中，justify-content: center;让li标签水平居中，align-items: center;让li标签垂直居中，margin: 0 10px;用于设置每个li标签之间的间距。

以上代码可以轻松实现用ul li放置图片的效果。