HTML <ul> 标签

Definisi dan penggunaan

<ul> Tag untuk menetapkan senarai tak terurut (dengan tanda butir).

Gunakan <ul> Tag dan <li> Tag untuk mencipta senarai tak terurut.

Petikan:Gunakan CSS untukTetapkan gaya senarai。

Petikan:Untuk senarai terurut, gunakan <ol> Tag。

Lihat juga:

Tutorial HTML:HTML 列表

Panduan Referensi HTML DOM:Objek Ul

Tutorial CSS:Tetapkan gaya senarai

Contoh

Contoh 1

Senarai HTML yang tak terurut:

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

亲自试一试

Contoh 2

Tetapkan jenis gaya senarai yang berbeza (gunakan CSS):

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

亲自试一试

Contoh 3

Pertambahan dan pengurangan tinggi baris didalam senarai (gunakan CSS):

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

亲自试一试

Contoh 4

Cipta senarai lain didalam senarai (senarai yang dihampiri):

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

亲自试一试

Contoh 5

Cipta senarai yang kompleks dengan pengecasan:

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