<ul>: 無序列表元素

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

<ul> HTML 元素表示一個無序列表項,通常渲染為專案符號列表。

試一試

<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 的過渡版本中定義的取值有:

  • circle
  • disc
  • square

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>

結果

技術摘要

內容類別 流內容,如果 <ul> 元素的子元素至少包含一個 <li> 元素,則為可觸及內容
允許內容 零個或多個 <li><script><template> 元素。
標籤省略 無,起始標籤和結束標籤都必須存在。
允許父級 任何接受流內容的元素。
隱式 ARIA 角色 list
允許的 ARIA 角色 directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM 介面 HTMLUListElement

規範

規範
HTML
# the-ul-element

瀏覽器相容性

另見

  • 其他列表相關 HTML 元素:<ol><li><menu>
  • 可能對樣式設定 <ul> 元素特別有用的 CSS 屬性
    • list-style 屬性,用於選擇序數顯示的方式。
    • CSS 計數器,用於處理複雜的巢狀列表。
    • line-height 屬性,用於模擬已棄用的 compact 屬性。
    • margin 屬性,用於控制列表縮排。