HTML 无序列表
HTML <ul> 标签定义一个无序（项目符号）列表。
无序 HTML 列表
一个无序列表以 <ul> 标签开头。每个列表项以 <li> 标签开头。
默认情况下，列表项将用项目符号（黑色小圆圈）标记。
无序 HTML 列表 - 选择列表项标记
CSS list-style-type 属性用于定义列表项标记的样式。它可以取以下值之一。
| 值 | 描述 |
|---|---|
| disc | 将列表项标记设置为项目符号（默认值） |
| circle | 将列表项标记设置为圆圈 |
| square | 将列表项标记设置为方块 |
| none | 列表项将不会被标记。 |
嵌套 HTML 列表
列表可以嵌套（列表在列表中）。
注意：列表项 (<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">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#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 标签参考。
