CSS 列表

列表用于组织并列或先后关系的内容，HTML 提供无序列表 ul、有序列表 ol。CSS 可以控制列表项的标记符号（圆点、数字、字母或图片）、符号位置，还能去掉默认符号，把列表改造成导航菜单等组件。

列表的基本结构

无序列表 ul 与有序列表 ol 内部都使用 li 作为列表项：

<ul><li>苹果</li><li>香蕉</li></ul>
<ol><li>第一步</li><li>第二步</li></ol>

效果说明：默认情况下，ul 的项目符号是实心圆点，ol 的项目符号是数字序号。

列表符号 list-style-type

list-style-type 设置标记的类型，无序与有序列表的取值不同：

ul { list-style-type: square; }          /* 实心方块 */
ol { list-style-type: decimal; }         /* 1 2 3 ... */
ol.alpha { list-style-type: lower-alpha; } /* a b c ... */

效果说明：无序常用 disc（默认实心圆点）/circle/square/none，有序常用 decimal/lower-alpha/lower-roman 等。

图片符号 list-style-image

list-style-image 用图片替换符号，url() 指向图片地址：

ul {
    list-style-image: url("arrow.png");
}

<ul><li>使用小箭头图片做符号</li></ul>

效果说明：图片符号不会自动缩放，图片尺寸需提前处理好，否则会显得过大或过小。

符号位置 list-style-position

list-style-position 控制符号在文本内部还是外部，取值为 inside 或 outside：

ul.outside { list-style-position: outside; } /* 默认：符号在文本外侧 */
ul.inside  { list-style-position: inside; }  /* 符号与文本同起一行 */

效果说明：outside 时换行文本顶到容器最左、符号独立悬挂；inside 时符号算作文本的一部分，与首字对齐。

简写与清除默认符号

list-style 可一次设置类型、位置与图片，也常用来整体清除默认符号：

ul { list-style: none; }            /* 去掉全部默认符号 */
ol { list-style: lower-roman inside; }

效果说明：list-style: none 会去掉圆点与数字，是制作纯文本列表和导航菜单的前提。

用列表做导航菜单

去掉符号并让 li 横向排列，即可把列表变成导航栏：

.nav { list-style: none; margin: 0; padding: 0; }
.nav li { display: inline-block; margin-right: 15px; }
.nav a { text-decoration: none; color: #1a73e8; }

<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">教程</a></li>
    <li><a href="#">关于</a></li>
</ul>

效果说明：display: inline-block 让 li 横向排列，配合无下划线链接形成简洁的顶部导航。

小结

列表样式围绕 list-style-type（符号）、list-style-image（图片符号）、list-style-position（位置）展开，list-style 简写可一键控制。把 list-style: none 与横向排列结合，还能把列表改造成导航菜单。