小菜鸟

java菜鸟号正在起航

0%

列表样式

发表于 更新于 分类于 阅读次数： 26 Valine： 0
本文字数： 12k 阅读时长 ≈ 11 分钟

HTML 列表样式详解：有序列表、无序列表与自定义样式全指南

HTML 列表是网页中组织结构化内容的核心元素，主要分为 有序列表（<ol>） 和 无序列表（<ul>），二者均通过 <li> 标签定义列表项。结合 CSS 的 list-style-type 等属性，可实现从 “默认符号” 到 “自定义图标” 的丰富样式。从 “核心标签→样式属性→自定义方案→实战场景” 四个维度，全面讲解 HTML 列表的使用与美化技巧。

HTML 列表核心标签

HTML 列表的基础结构由 “容器标签” 和 “列表项标签” 组成，两种列表的核心标签与默认行为差异如下：

1. 有序列表（<ol>：Ordered List）

  • 作用：用于展示有明确顺序的内容（如步骤、排名、优先级），默认以数字（1, 2, 3…）作为标记；
  • 核心标签：
    • <ol>：有序列表容器，定义列表的整体范围；
    • <li>：列表项（List Item），封装每一条具体内容，必须嵌套在 <ol> 内；
  • 默认样式：数字标记（decimal），列表项左侧缩进，上下有默认间距。
基础示例：
1
2
3
4
5
6
<!-- 有序列表基础用法 -->
<ol>
  <li>第一步：打开浏览器</li>
  <li>第二步：输入目标 URL</li>
  <li>第三步：按下回车键访问</li>
</ol>
默认效果：
  1. 第一步：打开浏览器
  2. 第二步：输入目标 URL
  3. 第三步：按下回车键访问

2. 无序列表（<ul>：Unordered List）

  • 作用：用于展示无顺序关系的内容（如商品列表、标签、导航菜单），默认以实心圆（●）作为标记；
  • 核心标签：
    • <ul>：无序列表容器，定义列表的整体范围；
    • <li>：列表项，必须嵌套在 <ul> 内；
  • 默认样式：实心圆标记（disc），列表项左侧缩进，上下有默认间距。
基础示例：
1
2
3
4
5
6
<!-- 无序列表基础用法 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>
默认效果：
  • 苹果
  • 香蕉
  • 橙子

3. 关键注意事项

  • 嵌套规则：<li> 是 <ol>/<ul> 的唯一直接子元素，不能将其他标签（如 <div>、<p>）直接放在 <ol>/<ul> 内；
  • 列表项内容：<li> 内可嵌套任意 HTML 元素（如 <a>、<img>、<span>，甚至嵌套另一个列表），满足复杂内容需求；
  • 语义化：选择列表类型时需符合内容语义（如 “步骤” 用 <ol>，“商品” 用 <ul>），而非仅根据样式选择。

核心样式属性：list-style-type

list-style-type 是控制列表标记样式的核心 CSS 属性，用于定义 “有序列表的编号类型” 或 “无序列表的符号类型”：

1. 无序列表（<ul>）的 list-style-type 取值

无序列表的标记为 “符号”，常用取值如下：

属性值 标记样式 适用场景 示例效果
disc 实心圆（●） 默认样式，通用列表 - 项目 1 - 项目 2
circle 空心圆（○） 二级列表、次要内容 ○ 项目 1 ○ 项目 2
square 实心方块（■） 强调性列表、分类标签 ■ 项目 1 ■ 项目 2
none 无标记 自定义图标、导航菜单 项目 1 项目 2（无标记）
示例：无序列表样式对比
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style>
  .list-container {
    display: flex; /* 横向排列多个列表，便于对比 */
    gap: 40px;
    padding: 20px;
  }
  ul {
    width: 150px;
  }
</style>

<div class="list-container">
  <!-- disc：实心圆 -->
  <ul style="list-style-type: disc;">
    <li>苹果</li>
    <li>香蕉</li>
  </ul>

  <!-- circle：空心圆 -->
  <ul style="list-style-type: circle;">
    <li>苹果</li>
    <li>香蕉</li>
  </ul>

  <!-- square：实心方块 -->
  <ul style="list-style-type: square;">
    <li>苹果</li>
    <li>香蕉</li>
  </ul>

  <!-- none：无标记 -->
  <ul style="list-style-type: none;">
    <li>苹果</li>
    <li>香蕉</li>
  </ul>
</div>

2. 有序列表（<ol>）的 list-style-type 取值

有序列表的标记为 “编号”，常用取值如下（补充你未提及的实用类型）：

属性值 编号样式 适用场景 示例效果
decimal 阿拉伯数字（1, 2, 3） 默认样式，通用有序列表 1. 项目 1 2. 项目 2
decimal-leading-zero 带前导零的数字（01, 02） 需统一编号位数的场景（如步骤 01） 01. 项目 1 02. 项目 2
lower-roman 小写罗马数字（i, ii, iii） 学术文档、书籍章节 i. 项目 1 ii. 项目 2
upper-roman 大写罗马数字（Ⅰ, Ⅱ, Ⅲ） 正式文档、法律条文 Ⅰ. 项目 1 Ⅱ. 项目 2
lower-alpha/lower-latin 小写字母（a, b, c） 分类标签、选项列表 a. 项目 1 b. 项目 2
upper-alpha/upper-latin 大写字母（A, B, C） 重要步骤、优先级列表 A. 项目 1 B. 项目 2
lower-greek 小写希腊字母（α, β, γ） 数学公式、科学文档 α. 项目 1 β. 项目 2
none 无编号 自定义编号样式 项目 1 项目 2（无编号）
示例：有序列表样式对比
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style>
  .ol-container {
    display: flex;
    gap: 40px;
    padding: 20px;
    flex-wrap: wrap; /* 自动换行，避免溢出 */
  }
  ol {
    width: 180px;
  }
</style>

<div class="ol-container">
  <!-- decimal：阿拉伯数字 -->
  <ol style="list-style-type: decimal;">
    <li>第一章 引言</li>
    <li>第二章 核心概念</li>
  </ol>

  <!-- decimal-leading-zero：带前导零 -->
  <ol style="list-style-type: decimal-leading-zero;">
    <li>步骤01：准备材料</li>
    <li>步骤02：开始操作</li>
  </ol>

  <!-- lower-roman：小写罗马数字 -->
  <ol style="list-style-type: lower-roman;">
    <li>第一部分</li>
    <li>第二部分</li>
  </ol>

  <!-- upper-alpha：大写字母 -->
  <ol style="list-style-type: upper-alpha;">
    <li>优先级 A</li>
    <li>优先级 B</li>
  </ol>
</div>

进阶样式：list-style 复合属性与标记位置

除了 list-style-type，CSS 还提供 list-style-position（标记位置）和 list-style-image（自定义标记图片），三者可通过 list-style 复合属性简化写法。

1. list-style-position：控制标记位置

定义列表标记（数字 / 符号）相对于列表项内容的位置，有两个核心取值：

  • outside（默认）：标记在列表项内容的左侧，不占用内容宽度（内容对齐整齐）；
  • inside：标记在列表项内容的内部，与内容同行显示（标记占用内容宽度，适合短内容）。
示例：标记位置对比
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
  .position-container {
    display: flex;
    gap: 40px;
    padding: 20px;
  }
  ul {
    width: 200px;
    border: 1px solid #eee; /* 加边框便于观察位置 */
    padding: 10px;
  }
</style>

<div class="position-container">
  <!-- outside：标记在内容外侧 -->
  <ul style="list-style-type: disc; list-style-position: outside;">
    <li>这是一段较长的列表项内容，用于演示标记在外侧的效果</li>
    <li>第二段内容，观察换行时的对齐方式</li>
  </ul>

  <!-- inside：标记在内容内侧 -->
  <ul style="list-style-type: disc; list-style-position: inside;">
    <li>这是一段较长的列表项内容，用于演示标记在内侧的效果</li>
    <li>第二段内容，观察标记与文字的同行显示</li>
  </ul>
</div>
效果差异：
  • outside：列表项文字换行后仍对齐，标记独立在左侧；
  • inside：标记与文字同行，换行文字会与标记对齐（可能破坏排版）。

2. list-style-image：自定义标记图片

用自定义图片替代默认的数字 / 符号标记，语法为 list-style-image: url("图片路径");，适合需要个性化标记的场景（如购物车图标、勾选图标）。

示例：自定义图片标记
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .custom-icon-list {
    list-style-type: none; /* 先隐藏默认标记，避免图片与默认标记重叠 */
    list-style-image: url("https://example.com/icons/check.png"); /* 自定义图片路径 */
    padding-left: 30px; /* 调整缩进，避免图片被截断 */
  }
  .custom-icon-list li {
    margin: 10px 0;
  }
</style>

<ul class="custom-icon-list">
  <li>已完成：注册账号</li>
  <li>已完成：完善个人信息</li>
  <li>待完成：提交审核</li>
</ul>
注意事项：
  • 图片建议使用小尺寸图标（如 16×16px、24×24px），避免标记过大破坏排版；
  • 若图片加载失败，会自动 fallback 到 list-style-type 定义的样式（建议同时设置 list-style-type 作为降级方案）。

3. list-style 复合属性

将 list-style-type、list-style-position、list-style-image 合并为一个属性，语法顺序为：
list-style: [list-style-type] [list-style-position] [list-style-image];（无需的属性可省略，默认值会生效）。

示例：复合属性简化写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 完整写法：类型为 square + 位置为 outside + 无自定义图片 */
ul {
  list-style: square outside none;
}

/* 简化写法：省略 none（默认无图片），位置使用默认 outside */
ul {
  list-style: square;
}

/* 自定义图片 + 位置 inside + 降级类型 disc */
ul {
  list-style: disc inside url("check.png");
}

高级自定义：突破默认样式的限制

默认列表样式（如标记位置、大小）存在局限性，通过 “隐藏默认标记 + 自定义内部元素” 的方案，可实现更灵活的列表样式（如彩色标记、带背景的标记、自定义编号）。

方案 1：彩色圆形标记（替代默认符号）

用 <span> 模拟彩色圆形标记，避免默认标记无法修改颜色的问题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
  .colored-list {
    list-style-type: none; /* 隐藏默认标记 */
    padding-left: 0;
  }
  .colored-list li {
    display: flex; /* 让标记与文字同行 */
    align-items: center; /* 垂直居中 */
    margin: 12px 0;
  }
  /* 自定义彩色圆形标记 */
  .colored-list .marker {
    width: 12px;
    height: 12px;
    border-radius: 50%; /* 圆形 */
    background-color: #2c7be5; /* 蓝色 */
    margin-right: 10px; /* 与文字间距 */
  }
</style>

<ul class="colored-list">
  <li><span class="marker"></span>前端开发</li>
  <li><span class="marker" style="background-color: #00b42a;"></span>后端开发</li>
  <li><span class="marker" style="background-color: #ff7d00;"></span>测试运维</li>
</ul>
效果：
  • 每个列表项前有不同颜色的圆形标记，比默认样式更美观、更具辨识度。

方案 2：自定义有序列表编号（带背景 / 颜色）

默认有序列表编号无法修改样式，通过 counter-reset（重置计数器）和 counter-increment（递增计数器）实现自定义编号：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style>
  .custom-ol {
    list-style-type: none; /* 隐藏默认编号 */
    counter-reset: custom-counter; /* 重置计数器，命名为 custom-counter */
    padding-left: 0;
  }
  .custom-ol li {
    position: relative;
    padding-left: 40px; /* 为自定义编号预留空间 */
    margin: 15px 0;
    line-height: 24px;
  }
  .custom-ol li::before {
    content: counter(custom-counter); /* 显示计数器值 */
    counter-increment: custom-counter; /* 计数器递增 1 */
    /* 自定义编号样式：圆形背景、白色文字 */
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #2c7be5;
    color: white;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
  }
</style>

<ol class="custom-ol">
  <li>需求分析：明确项目目标与用户需求</li>
  <li>设计阶段：完成 UI 设计与技术方案</li>
  <li>开发阶段：前后端开发与联调</li>
  <li>测试上线：功能测试与生产环境部署</li>
</ol>
效果：
  • 编号为蓝色圆形背景，白色文字，比默认数字更突出，适合强调步骤的场景。

方案 3：横向列表（导航菜单常用）

将垂直排列的列表改为横向排列，常用于导航菜单、标签栏等场景，核心是通过 display: flex 或 display: inline-block 实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
  /* 横向导航菜单 */
  .nav-list {
    list-style-type: none;
    padding-left: 0;
    display: flex; /* 横向排列 */
    gap: 20px; /* 列表项间距 */
    background-color: #f5f5f5;
    padding: 10px 20px;
  }
  .nav-list li a {
    text-decoration: none;
    color: #333;
    padding: 5px 10px;
  }
  .nav-list li a:hover {
    color: #2c7be5;
    border-bottom: 2px solid #2c7be5;
  }
</style>

<ul class="nav-list">
  <li><a href="/home">首页</a></li>
  <li><a href="/product">产品</a></li>
  <li><a href="/news">新闻</a></li>
  <li><a href="/about">关于我们</a></li>
</ul>
效果：
  • 列表项横向排列，鼠标悬浮时文字变色并显示下划线，符合导航菜单的交互逻辑。

实战场景：列表的典型应用

场景 1：嵌套列表（多级分类）

列表支持嵌套（<li> 内再放 <ol>/<ul>），适合展示多级分类（如目录、分类菜单）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<style>
  /* 一级列表：实心圆 */
  .level-1 {
    list-style-type: disc;
    margin: 10px 0;
  }
  /* 二级列表：空心圆 */
  .level-2 {
    list-style-type: circle;
    margin: 5px 0 5px 20px;
  }
  /* 三级列表：实心方块 */
  .level-3 {
    list-style-type: square;
    margin: 5px 0 5px 20px;
  }
</style>

<ul class="level-1">
  <li>前端开发
    <ul class="level-2">
      <li>HTML/CSS
        <ul class="level-3">
          <li>HTML5 新特性</li>
          <li>CSS3 动画</li>
        </ul>
      </li>
      <li>JavaScript
        <ul class="level-3">
          <li>ES6+ 语法</li>
          <li>React/Vue 框架</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>后端开发
    <ul class="level-2">
      <li>Java</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

场景 2：带图标的商品列表

结合图片和文字，用无序列表展示商品信息，适合电商页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<style>
  .product-list {
    list-style-type: none;
    padding-left: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  .product-item {
    width: 200px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 15px;
  }
  .product-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
  }
  .product-name {
    font-weight: bold;
    margin: 10px 0 5px;
  }
  .product-price {
    color: #ff4400;
    font-size: 16px;
  }
</style>

<ul class="product-list">
  <li class="product-item">
    <img src="apple.jpg" alt="苹果" class="product-img">
    <div class="product-name">红富士苹果</div>
    <div class="product-price">¥12.9/斤</div>
  </li>
  <li class="product-item">
    <img src="banana.jpg" alt="香蕉" class="product-img">
    <div class="product-name">海南香蕉</div>
    <div class="product-price">¥5.9/斤</div>
  </li>
  <li class="product-item">
    <img src="orange.jpg" alt="橙子" class="product-img">
    <div class="product-name">赣南脐橙</div>
    <div class="product-price">¥8.9/斤</div>
  </li>
</ul>

常见问题与解决方案

1. 列表默认缩进过大 / 过小

  • 问题原因：浏览器对 <ol>/<ul> 有默认 padding-left（如 Chrome 中 <ul> 默认 padding-left: 40px），导致缩进不符合预期；

  • 解决方案：手动设置padding-left调整缩进：

    1
    2
    3
    4
    5
    6
    ul {
      padding-left: 20px; /* 减小缩进 */
    }
    ol {
      padding-left: 30px; /* 增大缩进 */
    }

2. 自定义图片标记位置偏移

  • 问题原因：list-style-image 的图片位置由浏览器默认控制，可能与文字对齐不一致；

  • 解决方案：改用 “隐藏默认标记 + 内部<span>放图片” 的方案，通过flex或position精确控制对齐：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .icon-list {
      list-style-type: none;
      padding-left: 0;
    }
    .icon-list li {
      display: flex;
      align-items: center; /* 图片与文字垂直居中 */
    }
    .icon-list li img {
      width: 16px;
      height: 16px;
      margin-right: 8px; /* 图片与文字间距 */
    }

3. 嵌套列表样式混乱

  • 问题原因：多级嵌套列表未单独设置样式，导致各级标记相同或缩进重叠；

  • 解决方案：为不同层级的列表设置不同的list-style-type和margin-left/padding-left：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /* 一级列表 */
    ul {
      list-style-type: disc;
      margin-left: 0;
      padding-left: 20px;
    }
    /* 二级列表 */
    ul ul {
      list-style-type: circle;
      margin-left: 10px;
      padding-left: 20px;
    }
    /* 三级列表 */
    ul ul ul {
      list-style-type: square;
      margin-left: 10px;
      padding-left: 20px;
    }

总结与最佳实践

HTML 列表是网页结构化内容的基础，通过 <ol>（有序）和 <ul>（无序）满足不同语义需求，结合 CSS 可实现丰富的样式效果。核心总结如下：

1. 语义优先

  • 有顺序关系（步骤、排名）用 <ol>，无顺序关系（商品、标签）用 <ul>，避免仅根据样式选择标签；
  • 嵌套列表需符合层级逻辑（如一级分类→二级分类），增强页面语义化，利于 SEO 和无障碍访问。

2. 样式控制原则

  • 简单样式（默认符号 / 编号）用 list-style-type 直接控制；
  • 自定义标记（图片、彩色符号）用 “隐藏默认标记 + 内部元素模拟” 的方案，灵活性更高；
  • 横向列表（导航）用 display: flex 实现，避免使用 float（易导致布局问题）。

3. 兼容性与降级

  • 自定义图片标记时，同时设置 list-style-type 作为降级方案（防止图片加载失败）；
  • 避免使用过于特殊的 list-style-type 取值（如 lower-greek），部分旧浏览器可能不支持
相关文章

欢迎关注我的其它发布渠道

表情 | 预览
快来做第一个评论的人吧~
Powered By Valine
v1.3.10