Làm thế nào để có các danh sách được sắp xếp theo thứ tự chính xác

Question

Tôi không chắc chắn tôi hiểu hậu cần của việc này. Về cơ bản tôi muốn tạo ra một danh sách đơn giản trên một blog web giống như:

1. item1 
    a. item2 
2. item3 
    a. item4 
    b. item5 
3. item6 

Và như vậy, về cơ bản một danh sách tổng thể ra lệnh bằng số, với danh sách trẻ em dưới mỗi mục sư được lower-alpha ra lệnh.

tôi đạt được hiệu ứng này bằng cách sử dụng mã HTML này:

<ol> 
    <li>item1</li> 
    <ol> 
     <li>item2</li> 
    </ol> 
    <li>item3</li> 
    <ol> 
     <li>item4</li> 
     <li>item5</li> 
    </ol> 
    <li>item6</li> 
</ol> 

Với quy tắc này CSS nhỏ:

ol ol { list-style-type: lower-alpha; } /* sub ordered lists */ 

Vấn đề này tôi đã có được rằng theo validator w3c:

Yếu tố ol không được phép là con của phần tử ol trong ngữ cảnh này.

Tôi nghĩ rằng vấn đề này ought có một giải pháp rất đơn giản, tôi đã không thể tìm thấy một, và tôi không chắc là tôi làm theo lý do tại sao ol không thể là một con của ol.

Answer 1

Bạn làm điều đó như thế này:

<ol> 
    <li>item1 
     <ol> 
      <li>item2</li> 
     </ol> 
    </li> 
</ol> 

Bạn cần phải đặt các sublist bên mục danh sách cho các cấp cao nhất.

Answer 2

Tôi nghĩ rằng ol của bạn cần phải được trong một li:

<ol> 
    <li>item1</li> 
    <li> 
     <ol> 
      <li>item2</li> 
     </ol> 
    </li> 
</ol> 

Answer 3

Có một số cách để kiểm soát danh sách tiểu ra lệnh của bạn, hoặc với CSS hoặc HTML. Bạn gần như đã đạt được hiệu quả mong muốn, để có được một cái gì đó như thế này:

1. item1 
    a. item2 
2. item3 
    a. item4 
    b. item5 
3. item6 

HTML của bạn sẽ trông như thế này:

<ol> 
    <li>item1 
     <ol> 
      <li>item2</li> 
     </ol> 
    </li> 
    <li>item3 
     <ol> 
      <li>item4</li> 
      <li>item5</li> 
     </ol> 
    </li> 
    <li>item6</li> 
</ol> 

Và CSS của bạn sẽ trông như thế này:

ol li{ list-style-type:decimal; } /* sub ordered lists level 1 */ 
ol li ol li { list-style-type: lower-alpha; } /* sub ordered lists level 2 */ 

Bạn cũng có thể read more about a similar question here