<ul>: Phần tử Danh sách không có thứ tự

Try it

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

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

compact Deprecated

Thuộc tính Boolean này gợi ý rằng danh sách nên được hiển thị theo kiểu compact. Cách hiểu thuộc tính này phụ thuộc vào trình duyệt. Hãy sử dụng CSS thay thế: để tạo hiệu ứng tương tự thuộc tính compact, thuộc tính CSS line-height có thể được sử dụng với giá trị 80%.

type Deprecated

Thuộc tính này đặt kiểu dấu đầu dòng cho danh sách. Các giá trị được xác định theo HTML3.2 và phiên bản chuyển tiếp của HTML 4.0/4.01 là:

• circle
• disc
• square

Một kiểu dấu đầu dòng thứ tư đã được xác định trong giao diện WebTV, nhưng không phải tất cả trình duyệt đều hỗ trợ: triangle.

Nếu không có và nếu không có thuộc tính CSS list-style-type nào áp dụng cho phần tử, tác nhân người dùng sẽ chọn kiểu dấu đầu dòng tùy thuộc vào cấp độ lồng nhau của danh sách.

Warning: Đừng sử dụng thuộc tính này vì nó đã bị lỗi thời; hãy sử dụng thuộc tính CSS list-style-type thay thế.

Ghi chú sử dụng

• Phần tử <ul> dùng để nhóm một tập hợp các mục không có thứ tự số, và thứ tự của chúng trong danh sách không có ý nghĩa. Thông thường, các mục trong danh sách không có thứ tự được hiển thị với dấu đầu dòng, có thể có nhiều dạng khác nhau như dấu chấm, vòng tròn, hoặc hình vuông. Kiểu dấu đầu dòng không được xác định trong mô tả HTML của trang, mà trong CSS liên kết của nó, sử dụng thuộc tính list-style-type.
• Các phần tử <ul> và <ol> có thể được lồng nhau sâu tùy ý. Hơn nữa, các danh sách lồng nhau có thể xen kẽ giữa <ol> và <ul> không giới hạn.
• Cả hai phần tử <ol> và <ul> đều đại diện cho một danh sách các mục. Chúng khác nhau ở chỗ, với phần tử <ol>, thứ tự có ý nghĩa. Để xác định cái nào nên sử dụng, hãy thử thay đổi thứ tự các mục trong danh sách; nếu ý nghĩa thay đổi, hãy sử dụng phần tử <ol>, ngược lại bạn có thể sử dụng <ul>.

Ví dụ

Ví dụ cơ bản

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

Kết quả

Lồng danh sách

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

Kết quả

Danh sách có thứ tự bên trong danh sách không có thứ tự

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

Kết quả

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Các phần tử HTML liên quan đến danh sách khác: <ol>, <li>, <menu>
• Các thuộc tính CSS có thể đặc biệt hữu ích để tạo kiểu cho phần tử <ul>:
  • Thuộc tính list-style, để chọn cách hiển thị số thứ tự.
  • CSS counters, để xử lý các danh sách lồng nhau phức tạp.
  • Thuộc tính line-height, để mô phỏng thuộc tính compact đã bị lỗi thời.
  • Thuộc tính margin, để kiểm soát thụt lề danh sách.