CSS 列表

CSS 列表指的是使用 CSS 来样式化 HTML 中的列表元素，主要是 <ul>（无序列表）和 <ol>（有序列表），以及它们的列表项 <li>。

核心 CSS 列表属性

1. list-style-type - 设置列表项标记的类型

用于改变列表项前面的标记

/* 用于无序列表 (ul) 的值： */
ul {
    list-style-type: disc; /* 默认值，实心圆点 */
    list-style-type: circle; /* 空心圆圈 */
    list-style-type: square; /* 实心方块 */
    list-style-type: none; /* 无标记（常用于导航栏）*/
}

/* 用于有序列表 (ol) 的值： */
ol {
    list-style-type: decimal; /* 默认值，数字 1, 2, 3... */
    list-style-type: decimal-leading-zero; /* 前导零数字 01, 02, 03... */
    list-style-type: lower-roman; /* 小写罗马数字 i, ii, iii... */
    list-style-type: upper-roman; /* 大写罗马数字 I, II, III... */
    list-style-type: lower-alpha; /* 小写字母 a, b, c... */
    list-style-type: upper-alpha; /* 大写字母 A, B, C... */
}

2. list-style-position - 设置标记的位置

定义标记位于列表项内容框的内部还是外部。

ul {
    list-style-position: outside; /* 默认值，标记在内容框外 */
    list-style-position: inside; /* 标记在内容框内，成为文本流的一部分 */
}

视觉效果对比：

• outside: (标记) 这里是列表项的内容...
• inside: 这里是列表项的内容...（标记与文本起始对齐）

3. list-style-image - 使用自定义图片作为标记

可以用小图标来代替默认的标记。

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

简写属性：list-style

语法：

list-style: [list-style-type] [list-style-position] [list-style-image];

顺序不重要，可以省略某个值，未指定的值会设置为默认值。

示例：

ul {
    /* 完整写法 */
    list-style-type: square;
    list-style-position: inside;
    list-style-image: none;

    /* 等效的简写写法 */
    list-style: square inside;
}

ol {
    list-style: upper-roman outside; /* 类型 + 位置 */
}

.custom-list {
    list-style: url("custom-bullet.png") inside; /* 图片 + 位置 */
}

实用样式示例

示例 1：创建水平导航菜单（最经典用法）

.nav-menu {
    list-style: none; /* 移除默认项目符号 */
    padding: 0;
    margin: 0;
    background-color: #333;
    text-align: center;
}

.nav-menu li {
    display: inline-block; /* 让列表项水平排列 */
}

.nav-menu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 14px 20px;
    transition: background-color 0.3s;
}

.nav-menu a:hover {
    background-color: #555;
}

<ul class="nav-menu">
    <li><a href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>