[分享]css中如何让列表图片分开

以下是CSS中如何让列表图片分开的注意事项： CSS中有多种方法可以让列表图片分开，本文将介绍其中两种方法。方法一：使用liststyleimage属性liststyleimage属性用来将自定义的图...

以下是CSS中如何让列表图片分开的注意事项：

CSS中有多种方法可以让列表图片分开，本文将介绍其中两种方法。

方法一：使用list-style-image属性

list-style-image属性用来将自定义的图片作为列表项的标记，可以通过控制图片的宽度和height来达到列表项之间的间距。

ul{
    list-style-image: url('image.png'); /* 自定义图片 */
}

ul li{
    padding-left: 20px; /* 左填充，标记与文字之间的距离 */
    line-height: 30px; /* 行高 */
} 

方法二：使用background-image属性

background-image属性用来将指定的图片作为元素的背景图像，通过设置背景图像的repeat属性和位置属性来控制列表项之间的间距。

ul{
    list-style: none; /* 取消默认的标记 */
}

ul li{
    background-image: url('image.png');
    background-repeat: no-repeat; /* 不重复 */
    background-position: left center; /* 位置 */
    padding-left: 25px; /* 左填充，标记与文字之间的距离 */
    line-height: 30px; /* 行高 */
} 

以上两种方法都可以实现列表项之间的图片分开，选择适合自己的方法即可。