HTML <ul> 標簽

定義和用法

<ul> 標簽定義無序（帶項目符號）列表。

請使用 <ul> 標簽和 <li> 標簽來創建無序列表。

提示：請使用 CSS 來設置列表樣式。

提示：對于有序列表，請使用 <ol> 標簽。

另請參閱：

HTML 教程：HTML 列表

HTML DOM 參考手冊：Ul 對象

CSS 教程：設置列表的樣式

實例

例子 1

一個無序的 HTML 列表：

<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

親自試一試

例子 2

設置不同的列表樣式類型（使用 CSS）：

<ul style="list-style-type:circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<ul style="list-style-type:disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<ul style="list-style-type:square">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

親自試一試

例子 3

在列表中擴大和縮小行高（使用 CSS）：

<ul style="line-height:180%">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<ul style="line-height:80%">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

親自試一試

例子 4

在列表中創建另一個列表（嵌套列表）：

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>普洱</li>
      <li>綠茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

親自試一試

例子 5

創建更復雜的嵌套列表：

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
      <li>普洱</li>
      <li>綠茶
        <ul>
          <li>碧螺春</li>
          <li>龍井</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

親自試一試

全局屬性

<ul> 標簽還支持 HTML 中的全局屬性。

事件屬性

<ul> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <ul> 元素：

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

親自試一試

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持