css li标签插入图片

CSS中的li标签非常常用，特别是用于列表的呈现。但是在某些情况下，我们需要在li标签中插入图片。那么如何利用CSS实现这个功能呢？

  <ul>
    <li>
      <img src="example.jpg" />
      <p>这是列表项中的文本内容</p>
    </li>
  </ul>

首先，我们需要在li标签中添加一个img标签，并将图片的路径指定为img标签的src属性中。接着添加一个p标签，用于包含列表项中的文本内容。最后，我们需要利用CSS对li标签进行样式设置，以便让图片和文本能够正确的排版。

  li {
    display: flex;
    align-items: center;
  }
  
  li img {
    margin-right: 10px;
    width: 50px;
    height: 50px;
  }
  
  li p {
    margin: 0;
  }

利用flex布局，我们让li标签内的img标签和p标签形成一个水平方向的排列。在img标签的样式中，我们设置了图片与文本之间的右边距为10px，并将图片的宽高设置为50px，以便让排版更加美观。而在p标签的样式中，我们将其上下边距清零，以便让文本内容更加紧凑。

总之，利用CSS对li标签中的图片和文本进行排版，是实现列表呈现的常用方法，也让页面效果更美观。