<ul>：無序清單元素

嘗試一下

<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

此布林屬性提示應以緊湊樣式呈現清單。此屬性的解釋取決於user agent，並且並非所有瀏覽器都支援。

警告：請勿使用此屬性，因為它已被棄用：請改用 CSS。要達到與 compact 屬性類似的效果，可以使用具有值 80% 的 CSS 屬性line-height。

type

此屬性設置清單的項目符號樣式。在HTML3.2和HTML 4.0/4.01的過渡版本中定義的值有：

• circle
• disc
• square

WebTV界面中定義了第四種項目符號類型，但並非所有瀏覽器都支援：triangle。

如果未出現，且如果元素未應用 CSS list-style-type 屬性，則使用者代理程式將根據清單的巢狀層級選擇項目符號類型。

警告：請勿使用此屬性，因為它已被棄用；請改用 CSS list-style-type 屬性。

使用注意事項

• <ul> 元素用於將無意義的項目集合分組，它們在清單中的順序毫無意義。通常，無序清單項目顯示為項目符號，可以是點、圓圈或正方形等多種形式。項目符號樣式未在頁面的HTML描述中定義，而是在其相關的CSS中使用 list-style-type 屬性。
• <ul> 和 <ol> 元素可以嵌套得深入。此外，巢狀清單可以在 <ol> 和 <ul> 之間自由交替，沒有限制。
• <ol> 和 <ul> 元素都表示項目的清單。它們之間的區別在於對 <ol> 元素而言，順序是有意義的。要確定使用哪一個，請嘗試更改清單項目的順序；如果含義更改，則應使用 <ol> 元素，否則可以使用 <ul>。

範例

簡單範例

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

結果

嵌套清單

<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>

結果

無序清單內的有序清單

<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元素：<ol>、<li>、<menu>
• 可能對樣式化 <ul> 元素特別有用的 CSS 屬性：
  • list-style 屬性，選擇序數的顯示方式。
  • CSS 計數器，處理複雜的巢狀清單。
  • line-height 屬性，模擬已棄用的 compact 屬性。
  • margin 屬性，控制清單的縮進。