CSS 列表的样式 list-style-type、list-style-position和list-style-image 属性

在CSS中，列表元素是一个块框，列表中的每个表项也是一个块框，只是在表项前面多了一个项目符号。列表的格式化，主要由浏览器完成，而不是由设计人员完成。设计人员只能通过 list-style属性来定义列表的样式。

list-style属性只对 display 属性值为 list-item 的对象有效，对其它类型对象无效。list-style属性的语法格式为：

list-style：[ list-style-type ] || [ list-style-position ] || [ list-style-image ]

也就是说，list-style属性可以分解为 list-style-type、list-style-position和list-style-image 这3个独立的属性，下面分别进行介绍。

list-style-type

表 6-1 list-style-type属性的常用属性值及效果说明
属性值	效果说明
none	不使用任何项目符号
disc	默认值，实心圆
circle	空心圆
square	实心矩形
decimal	数字1、2、3、4、5
decimal-leading-zero	以0打头的数字，01、02、03、04、05
lower-alpha	小写英文字母，a、b、c、d、e
upper-alpha	大写英文字母，A、B、C、D、E
lower-roman	小写罗马数字，ⅰ、ⅱ、ⅲ、ⅳ、ⅴ
upper-roman	大写罗马数字，Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ

如果一个元素的 list-style-image属性的值设置为 none，或者 list-style-image属性指定的图像无法正常时，则由 list-style-type属性来决定 list-item 元素的外观。

由于CSS无法区别一个列表是有序列表，还是无序列表，因此，不管是有序列表还是无序列表，都是使用 list-style-type属性来定义列表项符号。只要你愿意，完全可以让一个有序列表使用实心圆，而非数字作为项目符号。如果项目符号设置为数字或字母，这些数字或字母由浏览器自动计算。

如果为 ul 或 ol 元素定义 list-style-type属性，则其内部的所有 li 子元素都使用相同的项目符号。当然，也可以为 li 元素单独设置 list-style-type属性，让其只对该 li 元素有效。

.disc {
list-style-type: disc;
}
.circle {
list-style-type: circle;
}
.decimal-leading-zero {
list-style-type: decimal-leading-zero;
}
.lower-alpha {
list-style-type: lower-alpha;
}
.upper-roman {
list-style-type: upper-roman;
}

上述代码定义了 5 个类，每个类定义了不同的列表项目符号类型，把这 5 个类分别应用于同一个 ul 元素下的不同 li 元素。

<ul>
<li class="disc">disc：默认值，实心圆</li>
<li class="circle">circle：空心圆</li>
<li class="decimal-leading-zero">decimal-leading-zero：以0打头的数字 01、02</li>
<li class="lower-alpha">lower-alpha：小写英文字母a、b、c、d、e</li>
<li class="upper-roman">upper-roman：大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ、Ⅴ</li>
</ul>

上述代码的运行结果如图 6‑2 所示：

图6-2 list-style-type属性效果

从上图可以看出，把上述 5 个类分别应用于同一个 ul 元素下的不同 li 元素后，不同的 li 元素具有不同的项目符号。

如果想禁止显示项目符号，就可以把 list-style-type属性值设置为 none，none 会导致浏览器在原本放置项目符号的位置不显示任何内容，不过，它不会中断有序列表的计数。如，有以下有序列表元素：

<ol>
<li>List Item 1</li>
<li style = "list-style-type: none;">List Item 2</li>
<li>List Item 3</li>
</ol>

上述列表中，禁止第二个列表项的项目符号。运行结果如图 6‑3 所示：

图6-3 禁止项目符号

由于 list-style-type属性具有继承性，所以，如果希望嵌套列表中使用不同的项目符号，可能需要在内层列表中单独定义。

list-style-position

list-style-position属性设置列表项目符号的位置及列表项的对齐方式，取值 outside | inside，默认值为 outside。

outside 表示列表项目符号放置在内容以外，列表项以内容为准对齐；inside 表示列表项目符号放置在内容以内，列表项以项目符号为准对齐。如：

ul {
padding: 0;
border: 1px solid #444;
list-style-type: square;
}
.outside {
list-style-position: outside;
}
.inside {
list-style-position: inside;
}

<ul class = "outside">
<li>outside的列表，列表项以内容为准对齐</li>
<li>outside的列表，列表项以内容为准对齐</li>
</ul>
<ul class = "inside">
<li>inside的列表，列表项以标记为准对齐</li>
<li>inside的列表，列表项以标记为准对齐</li>
</ul>

上述代码中，第一个列表采用 outside 列表项标记，第二个列表采用 inside 列表项标记。运行结果如图 6‑4 所示：

图6-4 list-style-position属性效果

从上图可以看出，如果列表项的内容为多行，在内容发生换行后，outside 的列表项是以内容为准对齐，而 inside 的列表项则以项目符号为准对齐。

上图还告诉我们，outside 列表的项目符号不但出现在列表项的内容之外，也出现在列表元素的内容之外，这是因为项目符号实际上并不是列表内容区的一部分，它不占据容器的空间。所以，在列表元素的 margin 或 padding 为 0 时，项目符号就有可能覆盖其它元素或被其它元素覆盖。如果发现列表的项目符号显示不出来，这可能是原因之一。

list-style-image

浏览器提供的列表项目符号，不能满足所有人的需要，并且可选择的范围有限。因此，可以通过 list-style-image属性定义一幅图像，来取代默认的列表项目符号。语法格式为：

list-style-image: none | url()

默认值为none，表示使用 list-style-type属性指定的列表项目符号；url()表示使用 url 指定的图像来取代默认的列表项目符号，如果图像无效，则 list-style-type属性会生效。如：

ul {
list-style-image: url(img/square.png);
}

<ul>
<li>list-style-type属性</li>
<li>list-style-position属性</li>
<li>list-style-image属性</li>
<ul>

上述代码中，使用图像 square.png 作为列表项标记。运行结果如图 6‑5 所示：

图6-5 list-style-image属性效果

不错，就这么简单，只需一个简单的 url() 值，就可以使用图像作为项目符号。不过，在选择图像时要当心，尽量选择合适尺寸的图片，否则项目符号可能不清晰。

通常，为了防止一些意外情况，如图像未能加载、或被破坏、或浏览器无法识别图像的格式等等，为列表定义一个备用的 list-style-type 是一个很好的实践。

ul {
list-style-image: url(img/square.png);
list-style-type: square;
}

由于list-style-image属性具有继承性，所以，内层的所有列表都会使用该图像作为项目符号。如果不希望这种情况发生，假如希望内层列表使用实心矩形，就需要把内层列表的 list-style-type属性设置为 square。另外，由于 list-style-image属性比 list-style-type属性的优先级要高。因此，还需要把内层列表的 list-style-image属性重置为 none。

ul ul {
list-style-image: none;
list-style-type: square;
}

得到的运行结果如图 6‑6 所示：

图6-6 改变嵌套列表符号

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。