<ol>: Phần tử Danh sách có thứ tự

Try it

<ol>
  <li>Mix flour, baking powder, sugar, and salt.</li>
  <li>In another bowl, mix eggs, milk, and oil.</li>
  <li>Stir both mixtures together.</li>
  <li>Fill muffin tray 3/4 full.</li>
  <li>Bake for 20 minutes.</li>
</ol>

li {
  font:
    1rem "Fira Sans",
    sans-serif;
  margin-bottom: 0.5rem;
}

Thuộc tính

Phần tử này cũng chấp nhận các thuộc tính toàn cục.

compact Deprecated Non-standard

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

reversed

Thuộc tính Boolean này chỉ định rằng các mục trong danh sách theo thứ tự ngược. Các mục sẽ được đánh số từ cao đến thấp.

start

Một số nguyên để bắt đầu đếm cho các mục trong danh sách. Luôn là số Ả Rập (1, 2, 3, v.v.), ngay cả khi type đánh số là chữ cái hoặc số La Mã. Ví dụ: để bắt đầu đánh số từ chữ cái "d" hoặc số La Mã "iv", hãy sử dụng start="4".

type

Đặt kiểu đánh số:

• a cho chữ cái thường
• A cho chữ cái hoa
• i cho số La Mã thường
• I cho số La Mã hoa
• 1 cho số (mặc định)

Kiểu được chỉ định được sử dụng cho toàn bộ danh sách trừ khi thuộc tính type khác được sử dụng trên phần tử <li> bên trong.

Note: Trừ khi kiểu số của danh sách quan trọng (như trong các tài liệu pháp lý hoặc kỹ thuật, nơi các mục được tham chiếu bằng số/chữ của chúng), hãy sử dụng thuộc tính CSS list-style-type thay thế.

Ghi chú sử dụng

Thông thường, các mục trong danh sách có thứ tự được hiển thị với marker đứng trước, chẳng hạn như số hoặc chữ cái.

Các phần tử <ol> và <ul> (hoặc từ đồng nghĩa <menu>) có thể lồng nhau sâu tùy ý, xen kẽ giữa <ol>, <ul> (hoặc <menu>) khi cần.

Cả hai phần tử <ol> và <ul> đều đại diện cho một danh sách các mục. Sự khác biệt là với phần tử <ol>, thứ tự có ý nghĩa. Ví dụ:

• Các bước trong công thức nấu ăn
• Chỉ đường rẽ từng bước
• Danh sách thành phần theo tỷ lệ giảm dần trên nhãn thông tin dinh dưỡng

Để xác định danh sách nào cần sử dụng, hãy thử thay đổi thứ tự các mục; 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>, hoặc <menu> nếu danh sách của bạn là một menu.

Ví dụ

Ví dụ cơ bản

<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

Kết quả

Sử dụng kiểu số La Mã

<ol type="i">
  <li>Introduction</li>
  <li>List of Grievances</li>
  <li>Conclusion</li>
</ol>

Kết quả

Sử dụng thuộc tính start

<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin' Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>

Kết quả

Lồng danh sách

<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

Kết quả

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

<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag is not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

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: <ul>, <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ử <ol>:
  • 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