HTML 无序列表
HTML <ul> 标签定义无序（项目符号）列表。
无序列表
无序列表以 <ul> 标签开始。每个列表项都以 <li> 标签开始。
无序列表是一个项目的列表，默认情况下，此列项目使用粗体圆点（典型的小黑圆圈）进行标记:
无序列表 - 选择列表项标记
CSS list-style-type 属性用于定义列表项标记的样式。它可以具有以下值之一：
| 值 | 描述 |
|---|---|
| disc | 将列表项标记设置为项目符号（默认） |
| circle | 将列表项标记设置为圆形 |
| square | 将列表项标记设置为正方形 |
| none | 列表项将不被标记 |
实例 - 项目符号
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
亲自试一试 »
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
实例 - 圆形
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
亲自试一试 »
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
实例 - 正方形
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
亲自试一试 »
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
实例 - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
亲自试一试 »
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
列表嵌套
列表可以嵌套（列表中的列表）：
实例
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
亲自试一试 »
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</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>
亲自试一试 »
<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 List 标签
| 标签 | 描述 |
|---|---|
| <ul> | 定义无序列表。 |
| <ol> | 定义有序列表。 |
| <li> | 定义列表项。 |
| <dl> | 定义定义列表。 |
| <dt> | 定义定义项目。 |
| <dd> | 定义定义的描述。 |
如需所有可用的 HTML 标签的完整列表，请访问 HTML 标签参考手册。
