HTML 无序列表

HTML <ul> 标签定义无序（带项目符号的）列表。

无序 HTML 列表

无序列表以 <ul> 标签开始。每个列表项以 <li> 标签开始。

默认情况下，列表项会以项目符号（小黑点）标记：

实例

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

亲自试一试

无序 HTML 列表 - 选择列表项标记

CSS list-style-type 属性用于定义列表项标记的样式。它可以具有以下值之一：

值	描述
disc	将列表项标记设置为实心圆点（默认）。
circle	将列表项标记设置为空心圆圈。
square	将列表项标记设置为实心方块。
none	列表项将不被标记。

实心圆点

实例 - 实心圆点

<ul style="list-style-type:disc;">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

亲自试一试

空心圆圈

实例 - 空心圆圈

<ul style="list-style-type:circle;">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

亲自试一试

实心方块

实例 - 实心方块

<ul style="list-style-type:square;">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

亲自试一试

无标记

实例 - 无标记

<ul style="list-style-type:none;">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

亲自试一试

嵌套 HTML 列表

列表可以嵌套（列表内部包含列表）：

实例

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

亲自试一试

注意：列表项 (<li>) 可以包含新列表以及其他 HTML 元素，如图像、链接等。

使用 CSS 创建水平列表

HTML 列表可以通过 CSS 以多种不同方式进行样式设置。

一种流行的方法是水平排列列表，以创建导航菜单：

实例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

亲自试一试

提示：您可以在我们的 CSS 教程中了解更多关于 CSS 的知识。

本章总结

使用 HTML <ul> 元素定义无序列表
使用 CSS list-style-type 属性定义列表项标记
使用 HTML <li> 元素定义列表项
列表可以嵌套
列表项可以包含其他 HTML 元素
使用 CSS 属性 float:left 水平显示列表

HTML 列表标签

标签	描述
<ul>	定义无序列表。
<ol>	定义有序列表。
<li>	定义列表项。
<dl>	定义描述列表。
<dt>	定义描述列表中的术语。
<dd>	描述描述列表中的术语。

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。