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>
自己動手試一試 »
Tip: You can learn much more about CSS in our CSS Tutorial.
Chapter Summary
- 使用 HTML
<ul>元素定義無序列表 - 使用 CSS
list-style-type屬性定義列表項標記 - 使用 HTML
<li>元素定義列表項 - 列表可以巢狀
- 列表項可以包含其他 HTML 元素
- 使用 CSS 屬性
float:left以水平方式顯示列表
HTML 列表標籤
| 標籤 | 描述 |
|---|---|
| <ul> | 定義無序列表 |
| <ol> | 定義有序列表 |
| <li> | 定義列表項 |
| <dl> | 定義描述列表 |
| <dt> | 定義描述列表中的術語 |
| <dd> | 描述描述列表中的術語 |
有關所有可用 HTML 標籤的完整列表，請訪問我們的 HTML 標籤參考。
