試一試
<ul>
<li>Milk</li>
<li>
Cheese
<ul>
<li>Blue cheese</li>
<li>Feta</li>
</ul>
</li>
</ul>
li {
list-style-type: circle;
}
li li {
list-style-type: square;
}
屬性
此元素包含全域性屬性。
compact已棄用-
這個布林屬性暗示列表應以緊湊的樣式呈現。對此屬性的解釋取決於瀏覽器。請改用 CSS:要實現與
compact屬性類似的效果,可以使用 CSS 屬性line-height並將其值設定為80%。 type已棄用-
此屬性設定列表的專案符號樣式。HTML3.2 和 HTML 4.0/4.01 的過渡版本中定義的取值有:
circlediscsquare
WebTV 介面中定義了第四種專案符號型別,但並非所有瀏覽器都支援:
triangle。如果未 present 且沒有 CSS
list-style-type屬性應用於該元素,則使用者代理將根據列表的巢狀級別選擇專案符號型別。警告:請勿使用此屬性,因為它已被棄用;請改用 CSS
list-style-type屬性。
用法說明
<ul>元素用於對一組沒有數字順序且列表中順序無意義的專案進行分組。通常,無序列表項顯示為專案符號,可以是幾種形式,例如點、圓圈或方塊。專案符號樣式不在頁面的 HTML 描述中定義,而是在其關聯的 CSS 中使用list-style-type屬性定義。<ul>和<ol>元素可以任意深度巢狀。此外,巢狀列表可以在<ol>和<ul>之間無限制地交替。<ol>和<ul>元素都表示一個列表項。它們的區別在於,對於<ol>元素,順序是有意義的。要確定使用哪一個,請嘗試更改列表項的順序;如果含義發生變化,則應使用<ol>元素,否則可以使用<ul>。
示例
基本示例
html
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
結果
巢狀列表
html
<ul>
<li>first item</li>
<li>
second item
<!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>
second item second subitem
<!-- Same for the second nested unordered list! -->
<ul>
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li>
<!-- Closing </li> tag for the li that
contains the third unordered list -->
<li>second item third subitem</li>
</ul>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
結果
有序列表巢狀在無序列表中
html
<ul>
<li>first item</li>
<li>
second item
<!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
結果
技術摘要
規範
| 規範 |
|---|
| HTML # the-ul-element |
瀏覽器相容性
載入中…