Thẻ HTML <ul>


Thí dụ

Danh sách HTML không có thứ tự:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Thêm các ví dụ "Hãy tự mình thử" bên dưới.


Định nghĩa và Cách sử dụng

Thẻ <ul>xác định danh sách không có thứ tự (dấu đầu dòng).

Sử dụng <ul>thẻ cùng với thẻ <li> để tạo danh sách không có thứ tự.

Mẹo: Sử dụng CSS để tạo kiểu cho danh sách .

Mẹo: Đối với danh sách có thứ tự, hãy sử dụng thẻ <ol>


Hỗ trợ trình duyệt

Element
<ul> Yes Yes Yes Yes Yes

Thuộc tính toàn cầu

Thẻ <ul>cũng hỗ trợ Thuộc tính chung trong HTML .


Thuộc tính sự kiện

Thẻ <ul>cũng hỗ trợ Thuộc tính sự kiện trong HTML .



Các ví dụ khác

Thí dụ

Đặt các loại kiểu danh sách khác nhau (với CSS):

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Thí dụ

Mở rộng và giảm chiều cao dòng trong danh sách (với CSS):

<ul style="line-height:180%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="line-height:80%">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Thí dụ

Tạo danh sách bên trong danh sách (danh sách lồng nhau):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Thí dụ

Tạo một danh sách lồng nhau phức tạp hơn:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Các trang liên quan

Hướng dẫn HTML: Danh sách HTML

Tham chiếu HTML DOM: Ul Object

Hướng dẫn CSS: Danh sách tạo kiểu


Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị <ul>phần tử với các giá trị mặc định sau:

Thí dụ

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