我们知道在 HTML 中列表可以分为无序列表、有序列表、定义列表。在网页中经常可以看到无序列表的使用，例如像导航栏菜单、新闻列表、商品分类、图片展示等，基本都是通过无序列表来实现的。

无序列表中每个列表项前面都会默认带一个圆点符号，然而一般我们平时在网站上看到的列表样式，通常前面是没有圆点符号的，所以我们要如何去掉这个默认的圆点符号呢？这些都可以通过 CSS 中的列表属性来实现。

本节要讲的 CSS 中的列表属性有下面四个：

属性

描述

list-sytle-type

设置列表项的标记的类型

list-style-position

设置列表项标记相对于列表项内容的位置

list-style-image

将图片设置为列表项的标记，属性值为 url('图片路径')

list-style

简写列表属性

list-sytle-type

list-sytle-type 属性用于设置列表项的标记的类型，和 HTML 中列表标签中的 type 属性类似。

常用值属性值如下所示：

属性

描述

none

无标记符号

disc

默认值，实心圆

circle

空心圆

square

实心正方形

decimal

数字

在实际应用中，上述几种属性值用的最多的还是 none，也就是用于去掉列表项的标记。

示例：

下面是一个没有添加任何样式的列表：

如果我们希望去掉列表前面默认的圆点，可以通过将 list-style-type 属性设置为 none 来实现：

ul{

list-style-type: none;

}

在浏览器中的演示效果：

list-style-image

list-style-image 属性用于使用图像来替换列表项的标记。但有一点需要注意，如果我们设置了 list-style-image 属性，这个时候设置的 list-sytle-type 属性将不起作用。一般为了防止某些浏览器不支持 list-style-image 属性，我们会设置一个 list-style-type 属性来替代。

示例：

例如我们将上面列表项的标记设置为一个图像(图片大小为50x50)，属性值为图像路径：

ul{

list-style-image: url(./flower.png);

}

在浏览器中的演示效果：

list-style-position

list-style-position 属性用于设置在何处放置列表项标记。

属性值有如下所示：

属性值

描述

outside

默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

inside

表示列表项目标记放置在文本内，且环绕文本根据标记对齐

示例：

例如我们可以设置两组不同的列表，分别将 list-style-position 属性设置为outside 和 inside 来进行对比：

CSS学习(9xkd.com)

• 第一项
• 第二项
• 第三项
• 第四项
• 第五项

• 第一项
• 第二项
• 第三项
• 第四项
• 第五项

CSS 样式代码：

.ul1{

list-style-position: inside;

}

.ul2{

list-style-position: outside;

}

在浏览器中的演示效果：

可以明显的看到，第一组列表的标记放置在文本内，第二组列表的标记位于文本的左侧。

list-style

list-style 属性是一个简写属性，是上述几个列表属性的简写形式，用于把所有列表的属性设置在一个声明中。

属性设置顺序为：list-style-type、list-style-position、list-style-image，也可以不设置其中某个属性，如果不设置则采用默认值。

示例：

例如设置一个简写列表样式，其中 list-style-type 属性值为 square、list-style-position 属性值为 inside、list-style-image 属性值为 url(./flower.png)：

ul{

list-style:square inside url(./flower.png);

}

在浏览器中的演示效果：

本节我们讲了 CSS 中的几个列表样式，一般我们用的最多的就是如何去掉列表项的默认标记，即 list-style-type:none。