thụt lề thích hợp cho các danh sách có thứ tự trong html

Question

Tôi không thể có danh sách được sắp xếp để hiển thị thụt lề thích hợp. Các con số đều được căn chỉnh ở bên phải. Vì vậy, trình duyệt (Chrome) hiển thị dấu cách trước số chữ số đơn và chỉ căn chỉnh các số có hai chữ số chính xác ở bên trái.

Làm cách nào để xuất danh sách có thứ tự đẹp, tất cả các số đều được căn chỉnh sang trái và các mục danh sách đều bắt đầu bên dưới nhau?

Answer 1

Nếu bạn không ngại sử dụng định vị tuyệt đối, điều này có thể phù hợp với bạn.

<style type="text/css"> 
li { 
    list-style-position: inside; 
} 
.li-content { 
    position: absolute; 
    left: 80px; 
} 
</style> 

<ol> 
    <li><span class="li-content">Test content</span></li> 
    (...) 
    <li><span class="li-content">Test content</span></li> 
</ol> 

Lưu ý: Nếu bạn đã có bất cứ điều gì xuất hiện ở phía bên trái của phần tử <ol> trên trang của bạn (như một div nổi), nội dung đó sẽ di chuyển số sang bên phải, nhưng không phải là acutal <li> Nội dung.

Bạn cũng có thể sử dụng một kỹ thuật hoàn toàn khác, với đánh dấu khác (các phần tử div lồng nhau) có màn hình: bảng và hiển thị: các thuộc tính ô bảng được đặt. Điều đó sẽ loại bỏ vấn đề với các yếu tố xuất hiện ở bên trái, nhưng sẽ yêu cầu bạn sử dụng thuộc tính CSS counter.

Answer 2

Trên thực tế, các giải pháp được khá đơn giản, chỉ cần đặt

ol {list-style-position: inside;} 

Và con số của bạn nên "align sang trái" như bạn muốn.

Answer 3

muộn để bên nhưng tôi đã chỉ được vật lộn với vấn đề này bản thân mình và kết thúc sử dụng kết hợp này có thêm một số không trước khi bất kỳ mục danh sách chữ số duy nhất:

ol { 
    margin:0px 0; 
    padding:0; 
    list-style: decimal-leading-zero inside none; 
} 

ol li 
{ 
    margin: 0px; 
    padding: 0px; 
    text-indent: -2.2em; 
    margin-left: 3.4em; 
} 

Answer 4

Bạn có thể sử dụng CSS để chọn một phạm vi; trong trường hợp này, bạn muốn danh sách các mục 1-9:

ol li:nth-child(n+1):nth-child(-n+9) 

Sau đó điều chỉnh lề trên những mặt hàng đầu tiên một cách thích hợp:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; } 
ol li:nth-child(n+1):nth-child(-n+9) em, 
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; } 

Nhìn thấy nó trong hành động ở đây: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/