不一样的列表符号

最新推荐文章于 2026-04-24 14:08:14 发布

原创最新推荐文章于 2026-04-24 14:08:14 发布 · 1.9k 阅读

本内容遵循CC 4.0 BY-SA版权协议

在写网页的过程中，总避免不了的需要使用列表，但是看似简单的列表，其实也有这不少细节容易被忽略。列表常见的有两种：有序列表ol、无序列表ul；二者均可以使用列表样式list-style的属性，为列表设置样式。

1、list-style属性值

其实list-style是一个复合属性，它包含了三种其他列表的样式属性，该属性是写给ul的。例如list-style:square inside none;表示列表符号是实心方块，在文本以内显示，无图片标记。复合式写法的属性三者顺序就是：标记类型、位置、类型图片标记。当然，也可以不全写，如果不写其中一个属性，则显示默认值。

list-style-type
该属性是列表项符号标记的类型，默认值是disc实心圆。它的类型可以有很多种，例如spuare实心方块、circle空心圆、包括数字decimal等等，另外将属性写成list-style-type:none;时，表示没有任何标记，常用于取消列表符号标记。
list-style-position
该属性是列表项符号标记的位置，默认值是outside，表示标记在文本左侧以外的位置。下图表示标记类型默认值disc实心圆，位置属性是默认值outside。

还有另外一个属性值是inside，表示标记在文本以内的位置。下图表示标记类型为square实心方块，位置属性是inside。

在这里插入图片描述

list-style-image
列表项的标记的图像，由image可以看出来该属性是需要图片的参与，即以插入url图像来作为列表项的符号，该属性的默认值是none，如果需要添加图片作为标记，语法是list-style-image:url(’./…/img.jpg’);

好了，基础的用法就写完了。接下来就是总结一下我遇到的问题~

2、符号和文本的间隔方法

与列表的样式写给ul不同，符号和文本的间隔的宽度更改，是需要写给 li 的，因为在默认情况下，文本和符号的间隔是固定的，如果想要增加或者减小二者的距离，就需要使用文本缩进的方法，写给li即可实现，这里需要特别注意的是，列表标记的位置必须是默认值outside，如果inside则不能实现。

默认间隔如下图所示：
在这里插入图片描述
代码：

 ul li{
            height: 30px;
            line-height: 30px;
            border-bottom:2px solid pink;
            text-indent: 30px;
        }

实现效果图
在这里插入图片描述
使用text-indent更改间隔大小，还有一个优点就是它不仅可以增加间隔，也可以使用负值缩小间隔大小。

text-indent: -10px;

在这里插入图片描述
该方法其实也存在缺点，那就是文本缩进只能更改文本内容的位置，其 li 的样式（边框、背景等）则不会随之缩进。当没有边框这些样式的时候，则使用起来很方便。

3 、插入背景图作为列表标记方法

列表符号有固定的类型，但在实际运用中，常常会被固定的类型所限制。比如说标记类型会和文本一起改变颜色、大小、位置等样式，但是使用背景图的方法，则会各不影响。
文本缩进的方法中提到，列表标记位置为inside时，间隔就会无效显示，这是因为标记符号是在文本内的话，列表标记是相当于内容的，所以使用文本缩进时，列表的符号和文本是一起缩进的。另外，列表标记的位置只有inside和outside两个属性值，在实际的网页设计中，只有这两个位置是不能够满足需求的，比如说要求标记的位置是在 li 的左上角，这时列表标记位置属性list-style-position的属性值就不能实现需求了。
故，这时就需要用到插入背景图的方法来实现了。这种方法不仅可以实现标记的位置随意设置，也可与li的样式设置各不影响。
背景background也是一个复合式属性，它可以写颜色、背景图、是否平铺、背景图位置。
例如：
background: url(./…/img/jiao.jpg) no-repeat left bottom;
表示背景图在父元素中插入一个图片，不平铺、位置为左下角。
具体的属性名称分别为：

background-color 背景色，列表背景图作为列表标记使用时，一般用不到背景色；
background-image: url(./…/img.jpg); 插入背景图，默认是以平铺显示的，需要和如何重复背景图像属性配合使用
background-repeat:表示如何重复背景图像，默认值是repeat，背景图像在水平和垂直方向上重复。反之它也需要和背景图配合使用。
background-position ：表示如何设置背景图像的起始位置。默认值是左上角，属性值可以写方位词，也可以写像素值，第一个表示水平方向，第二个表示垂直方向，如果只写一个，第二个默认center。

使用背景图设置列表标记的时候，需要给list-style：none；清楚原本所默认带有的列表标记属性值。

因为背景图并不占li中的空间，所以文本是顶格显示的，需要设置文本缩进值，使得背景图标记不被文本遮盖。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 去除ul li 中默认带有的margin和padding值 */
        *{margin: 0;padding: 0;}
        ul{
            width: 300px;
            height: 200px;
            margin: 50px auto;
            border: 2px solid red;
        }
        ul li{
            height: 30px;
            line-height: 30px;
            border-bottom:2px solid pink;
            list-style: none;/*去除li本身的默认样式*/
            background: url(./../img/jiao.jpg) no-repeat left bottom;
            /* 背景图并不占li中的空间，所以文本是顶格显示的，需要设置文本缩进值，让背景图标记不被遮盖 */
            text-indent: 15px;
        }
    </style>
</head>
<body>
    <ul>
        <li>列表符号颜色的改变</li>
        <li>列表符号颜色的改变</li>
        <li>列表符号颜色的改变</li>
        <li>列表符号颜色的改变</li>
        <li>列表符号颜色的改变</li>
        <li>列表符号颜色的改变</li>
    </ul>
</body>
</html>

效果图：
在这里插入图片描述