39. 无序列表 ul 与 li

本节目标：学会用 <ul> 和 <li> 创建无序列表，理解列表的嵌套结构，掌握用 CSS 改变列表标记样式。

列表是网页中最常用的结构之一。购物清单、导航菜单、功能列表……都用得上。HTML 提供了三种列表类型，这一节先说无序列表。

什么是无序列表

无序列表就是各项目之间没有顺序先后之分。默认情况下，每个列表项前面会显示一个圆点（实心圆）。

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

浏览器显示效果：

豆浆
油条
豆汁
焦圈

Note

<ul> 是 unordered list（无序列表）的缩写。所有列表项必须用 <li>（list item）标签包裹。

基本结构规则

无序列表的结构很简单：

<ul> 作为容器，包裹所有列表项
每个列表项用 <li> 包裹
<li> 内部可以放任何 HTML 元素

<ul>
  <li>普通文字</li>
  <li><a href="#">链接</a></li>
  <li><strong>加粗文字</strong></li>
  <li><img src="icon.png" alt="图标">带图片的列表项</li>
</ul>

列表的嵌套

列表里面可以再放列表，形成层级结构。这是很常见的需求。

<ul>
  <li>茶
    <ul>
      <li>红茶</li>
      <li>绿茶</li>
      <li>乌龙茶</li>
    </ul>
  </li>
  <li>咖啡</li>
  <li>牛奶</li>
</ul>

显示效果：

茶
- 红茶
- 绿茶
- 乌龙茶
咖啡
牛奶

嵌套列表时，把新的 <ul> 放在 <li> 标签内部。理论上可以无限嵌套，但超过三层就不好看了。

Tip

嵌套列表的缩进是浏览器默认样式。想调整缩进距离，用 CSS 的 padding 或 margin 来控制。

用 CSS 改变列表标记

默认的圆点不一定符合设计需求。CSS 的 list-style-type 属性可以切换标记样式：

<ul style="list-style-type: disc">
  <li>实心圆（默认）</li>
</ul>

<ul style="list-style-type: circle">
  <li>空心圆</li>
</ul>

<ul style="list-style-type: square">
  <li>实心方块</li>
</ul>

<ul style="list-style-type: none">
  <li>无标记</li>
</ul>

显示效果：

disc：实心圆点
circle：空心圆圈
square：实心方块
none：去掉标记

Note

list-style-type: none 经常用于导航菜单。去掉列表样式后，再用 CSS 把列表横排显示。

实际应用：横向导航菜单

把无序列表变成水平导航菜单，是最经典的做法之一：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      background-color: #333;
    }
    li {
      display: inline-block;
    }
    li a {
      display: block;
      color: white;
      padding: 14px 16px;
      text-decoration: none;
    }
    li a:hover {
      background-color: #111;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</body>
</html>

把 list-style-type 设为 none 去掉圆点，display: inline-block 让列表项横向排列，就变成了导航条。

常见错误

忘记包裹 <li>

<!-- 错误 -->
<ul>
  豆浆
  油条
</ul>

<!-- 正确 -->
<ul>
  <li>豆浆</li>
  <li>油条</li>
</ul>

<ul> 的直接子元素必须是 <li>，否则语义不规范。

标签嵌套顺序错误

<!-- 错误 -->
<ul><li>项目1<ul><li>子项</li></ul></li></ul>

<!-- 正确 -->
<ul>
  <li>项目1
    <ul>
      <li>子项</li>
    </ul>
  </li>
</ul>

内层 <ul> 要放在外层 <li> 的内容区域，不是外面。

小结

<ul> 定义无序列表，<li> 定义列表项
列表可以嵌套，形成层级结构
用 list-style-type 改变标记样式
无序列表常被用作导航菜单的基础

下一节，我们学习有序列表。