PHP小码农

Appearance

ul 无序列表 ​

<ul> 标签用于创建无序列表（Unordered List）。列表项的顺序不重要时使用 <ul>，浏览器默认在每项前面显示圆点符号。<ul> 与 <li>（列表项）配合使用。

前置知识

阅读本节前，建议先了解：wbr 换行时机

基础概念 ​

<ul> 是 "Unordered List"（无序列表）的缩写。无序列表中的项目没有特定的先后顺序，各项地位平等。浏览器默认为每个列表项添加实心圆点（disc）作为项目符号。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>ul 无序列表示例</title>
</head>
<body>
  <h1>前端技术栈</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</body>
</html>

详细说明 ​

ul 的默认样式 ​

属性默认值（Chrome）说明
displayblock块级元素
margin-top16px (1em)上外边距
margin-bottom16px (1em)下外边距
padding-left40px (2.5em)左内边距（缩进）
list-style-typedisc实心圆点

li 的默认样式 ​

属性默认值
displaylist-item
list-style-typedisc（继承自 ul）

嵌套列表 ​

<ul> 可以嵌套，形成多级列表：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>嵌套无序列表</title>
</head>
<body>
  <h1>Web 开发技术</h1>
  <ul>
    <li>前端
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>CSS3 动画</li>
            <li>CSS Grid</li>
            <li>Flexbox</li>
          </ul>
        </li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>后端
      <ul>
        <li>Node.js</li>
        <li>Python</li>
        <li>Java</li>
      </ul>
    </li>
  </ul>
</body>
</html>

自定义项目符号 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义项目符号</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; }
    .list-circle { list-style-type: circle; }
    .list-square { list-style-type: square; }
    .list-none { list-style-type: none; }
    .list-emoji { list-style: "✓ " "✗ " "→ "; }
    .list-custom { list-style: "► "; }
  </style>
</head>
<body>
  <h2>实心圆（默认）</h2>
  <ul>
    <li>默认样式</li>
  </ul>

  <h2>空心圆</h2>
  <ul class="list-circle">
    <li>circle 样式</li>
  </ul>

  <h2>方块</h2>
  <ul class="list-square">
    <li>square 样式</li>
  </ul>

  <h2>无符号</h2>
  <ul class="list-none">
    <li>无符号列表</li>
  </ul>
</body>
</html>

list-style-type 常用值 ​

值效果说明
disc●实心圆（默认）
circle○空心圆
square■实心方块
none无无符号
decimal1. 2. 3.数字（适合 ol）

实战示例 ​

导航菜单 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>导航菜单</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .nav-menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; background: #333; padding: 0.75rem 1rem; border-radius: 4px; }
    .nav-menu a { color: white; text-decoration: none; padding: 0.25rem 0.5rem; }
    .nav-menu a:hover { background: #555; border-radius: 2px; }
  </style>
</head>
<body>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</body>
</html>

注意事项 ​

  • <ul> 的直接子元素只能是 <li>
  • 不要在 <ul> 中直接放置其他元素（如 <p>、<div>）
  • 嵌套列表应在 <li> 内部
  • 如果项目顺序有意义，应使用 <ol> 而非 <ul>
html
<!-- 错误：ul 中直接放 p -->
<ul>
  <p>第一项</p>  <!-- 浏览器会自动添加 li -->
  <p>第二项</p>
</ul>

<!-- 正确 -->
<ul>
  <li>第一项</li>
  <li>第二项</li>
</ul>

最佳实践 ​

  1. 无序内容用 ul：项目顺序不重要时使用
  2. 嵌套列表：多级分类使用嵌套
  3. 自定义样式：使用 list-style-type 或 list-style-image 自定义符号
  4. 语义优先：导航用 <nav> + <ul>，不要用 <div> 模拟列表

下一节

继续学习：ol 有序列表

参考链接 ​