自定义列表li项目符号

最新推荐文章于 2023-07-30 10:06:08 发布

原创最新推荐文章于 2023-07-30 10:06:08 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#li #html #css

html/css 专栏收录该内容

75 篇文章

订阅专栏

本文介绍了如何使用CSS自定义HTML列表`li`元素的项目符号，重点讲解了`list-style:none`用于清除默认样式，以及通过`background-image`设置背景图片作为自定义符号，`background-repeat:no-repeat`确保只显示一个符号，和`padding-left`调整内容与符号的距离。还提及`list-style`是一个组合属性，包括`list-style-type`、`list-style-position`和`list-style-image`，分别用于设置标记类型、位置和图像。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

list-style:none;写在ul里！

自定义符号主要是使用background-image属性

示例代码:

li{
    background-image:url('../img/nav.png') ;
    background-repeat : no-repeat ;
    padding-left:40px;
}

list-style:none;用来清除默认样式；
background-image设定背景图片，也就是我们看成的项目符号；
background-repeat设定背景图片重复，设定no-repeat就会显示一个；
padding-left设定项目内容与图片的距离，不设定的话会重叠在一起。

background-image和background-repeat可以一起写在background里，

运行结果：
这里写图片描述

——————2016.2.24————————-
　　　又回过头来看看li元素。
　　　list-style其实是一个组合属性，完整的表示应该是形如这样的：
　　　

list-style: square inside url('/i/eg_arrow.gif')

ul{
    list-style:square inside url('/i/arrow.gif');
}

　　　分别对应了list-style-type; list-style-position; list-style-image属性。
　　　list-style-type：设置列表项标记的类型（可自行查阅）；
　　　list-style-position：设置在何处放置列表项标记，属性值为inside或者outside（默认）或者inherit，如果是inside，那么列表项标记会放置在li元素内部，如果是outside，则放置在li元素外部。示例地址，（可通过审查元素查看）；
　　　list-style-image：使用图像来替换列表项的标记。