Danh sách với số thập phân

Question

là nó có thể có <li> số như thế này ?:

1.1 First Item 
1.2 Second Item 
2.1 Other item 

Answer 1

Bạn có thể sử dụng CSS tạo ra nội dung và quầy, tuy nhiên đoán mà trình duyệt không hỗ trợ nó ...

Nếu bạn cần hỗ trợ chung, bạn sẽ cần thực hiện phía máy chủ hoặc với JavaScript.

http://www.w3.org/TR/CSS21/generate.html

http://www.evotech.net/blog/2009/05/css-content-counter-increment-counter-reset/

Answer 2

Trang này liệt kê tất cả có sẵn các loại kiểu danh sách trong HTML (cùng với khả năng tương thích trình duyệt):

http://www.quirksmode.org/css/lists.html

Như bạn có thể thấy, số phụ nhọn không phải là tùy chọn được hỗ trợ, vì vậy nếu bạn muốn thực hiện chính xác như bạn đã đề xuất, thì bạn sẽ phải thực hiện theo cách thủ công - văn bản thuần hoặc javascript hoặc có thể sử dụng CSS before: (tùy chọn cuối cùng này có thể là lựa chọn ưu tiên của tôi, ngoại trừ việc nó không hoạt động trong các phiên bản cũ của IE). được hỗ trợ. Sử dụng danh sách lồng nhau sẽ cho phép bạn có danh sách ngoài được đánh số 1,2,3, vv trong khi danh sách bên trong được đánh số I, II, III, IV, v.v.

Hy vọng điều đó sẽ hữu ích.

Answer 3

Just for fun, điều này ít jQuery snippet

$("ol").each(function(i) { 
    $(this).children("li").not(":has(ol)").each(function(n, el) { 
     $(this).prepend("<span>" + i + "." + (n+1) + " </span>"); 
    }); 
}); 

sản xuất hiệu quả mong muốn, nhưng chỉ làm việc với 2 cấp độ cho kiểu này bố trí:

<ol> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
      <li>Five</li> 
     </ol> 
    </li> 
    <li> 
     <ol> 
      <li>One</li> 
      <li>Two</li> 
      <li>Three</li> 
      <li>Four</li> 
     </ol> 
    </li> 
</ol 

Answer 4

Cách thích hợp để làm điều đó là bởi sử dụng thuộc tính tăng truy cập CSS.
Bạn có thể thiết lập bộ phận và các phần phụ như "Phần 1", "1.1", "1.2", vv
http://www.w3schools.com/cssref/pr_gen_counter-increment.asp

<style> 
    ol { counter-reset: item } 
    li { display: block } 
    li:before { content: counters(item, ".") " "; counter-increment: item } 
</style> 

    <ol> 
     <li>First level</li> 
     <li>First level 2 
      <ol> 
       <li>Second level</li> 
       <li>Second level 2 
        <ol><li>Third level</li></ol> 
       </li> 
      </ol> 
     </li>   
    </ol> 

Một lời giải thích rất lớn: http://www.impressivewebs.com/css-counter-increment/