Làm cách nào để căn trái các số trong danh sách có thứ tự?
1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up
Thay đổi ký tự sau số trong danh sách có thứ tự?
1) an itemNgoài ra, có một giải pháp CSS để thay đổi từ số sang danh sách chữ cái / la mã thay vì sử dụng thuộc tính type trên phần tử ol.
Tôi chủ yếu quan tâm đến các câu trả lời hoạt động trên Firefox 3.
Câu trả lời:
Đây là giải pháp tôi đã làm việc trên Firefox 3, Opera và Google Chrome. Danh sách vẫn hiển thị trong IE7 (nhưng không có dấu ngoặc đóng và số căn lề trái):
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li::before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine<br>Items</li>
<li>Ten<br>Items</li>
</ol>CHỈNH SỬA: Bao gồm sửa nhiều dòng bằng bộ phân dải
Ngoài ra, có một giải pháp CSS để thay đổi từ số sang danh sách chữ cái / la mã thay vì sử dụng thuộc tính type trên phần tử ol.
Tham khảo thuộc tính CSS kiểu danh sách . Hoặc khi sử dụng bộ đếm, đối số thứ hai chấp nhận giá trị kiểu kiểu danh sách. Ví dụ sau đây sẽ sử dụng chữ La Mã viết hoa:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
CSS để tạo kiểu danh sách có ở đây , nhưng về cơ bản là:
li {
list-style-type: decimal;
list-style-position: inside;
}
Tuy nhiên, bố cục cụ thể mà bạn đang theo đuổi có lẽ chỉ có thể đạt được bằng cách đi sâu vào các phần bên trong của bố cục với một cái gì đó như thế này (lưu ý rằng tôi chưa thực sự thử nó):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Bạn cũng có thể chỉ định các số của riêng mình trong HTML - ví dụ: nếu các số đang được cung cấp bởi cơ sở dữ liệu:
ol {
list-style: none;
}
ol>li:before {
content: attr(seq) ". ";
}<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>Các seqthuộc tính được thực hiện có thể nhìn thấy bằng cách sử dụng phương pháp tương tự như được đưa ra trong câu trả lời khác. Nhưng thay vì sử dụng content: counter(foo), chúng tôi sử dụng content: attr(seq).
value="4A", vì nó sẽ không hoạt động. Ngoài ra, thuộc tính giá trị có thể hoạt động với typethuộc tính, nhưng giá trị vẫn phải là một số (vì nó hoạt động trong một tập hợp có thứ tự).
reversedthuộc tính chỉ là html5, cũng như sử dụng thuộc tính valuecủa li). Thay vì sử dụng của bạn seqtôi đặt một valuevà sử dụng attr(value)thay vìattr(seq)
Đánh cắp rất nhiều điều này từ các câu trả lời khác, nhưng điều này đang hoạt động trong FF3 đối với tôi. Nó có upper-roman, thụt lề đồng nhất, một dấu ngoặc nhọn.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</body>
</html>
Tôi khuyên bạn nên chơi với thuộc tính: before và xem những gì bạn có thể đạt được với nó. Điều đó có nghĩa là mã của bạn thực sự bị giới hạn trong các trình duyệt mới đẹp và loại trừ phần (lớn một cách khó chịu) của thị trường vẫn đang sử dụng các trình duyệt cũ rác rưởi,
Một cái gì đó giống như sau, buộc cố định với các mục. Vâng, tôi biết việc phải tự chọn chiều rộng sẽ kém thanh lịch hơn, nhưng việc sử dụng CSS cho bố cục của bạn giống như công việc của cảnh sát chìm: cho dù động cơ của bạn tốt đến đâu, nó luôn trở nên lộn xộn.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Nhưng bạn sẽ phải thử nghiệm để tìm ra giải pháp chính xác.
Các con số sắp xếp tốt hơn nếu bạn thêm các số 0 ở đầu vào các số, bằng cách đặt loại kiểu danh sách thành:
ol { list-style-type: decimal-leading-zero; }valuethuộc tính (không cần CSS)Các trình duyệt hiện đại sẽ diễn giải valuethuộc tính và sẽ hiển thị nó như bạn mong đợi. Xem tài liệu MDN .
<ol>
<li value="3">This is item three.</li>
<li value="50">This is item fifty.</li>
<li value="100">This is item one hundred.</li>
</ol>Cũng có một cái nhìn tại các <ol>bài viết về MDN , đặc biệt là tài liệu cho startvà thuộc tính.
Mượn và cải thiện câu trả lời của Marcus Downing . Đã thử nghiệm và hoạt động trên Firefox 3 và Opera 9. Hỗ trợ nhiều dòng.
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}
li:before {
content: counter(item) ")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}Có thuộc tính Type cho phép bạn thay đổi kiểu đánh số, tuy nhiên, bạn không thể thay đổi dấu dừng đầy đủ sau số / chữ cái.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>Tài liệu nói về list-style-position: outside
CSS1 không chỉ định vị trí chính xác của hộp đánh dấu và vì lý do tương thích, CSS2 vẫn không rõ ràng. Để kiểm soát chính xác hơn các hộp đánh dấu, vui lòng sử dụng bút đánh dấu.
Trên trang đó là nội dung về điểm đánh dấu.
Một ví dụ là:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}Không ... chỉ cần sử dụng DL:
dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}Tôi có nó. Hãy thử những cách sau:
<html>
<head>
<style type='text/css'>
ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }
</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>Điều đáng chú ý là điều này chắc chắn sẽ không hoạt động trên các trình duyệt cũ hơn hoặc ít tuân thủ hơn: display: inline-blocklà một thuộc tính rất mới.
Giải pháp thay thế nhanh chóng và bụi bẩn . Bạn có thể sử dụng một ký tự lập bảng cùng với văn bản được định dạng sẵn. Đây là một khả năng:
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>và html của bạn:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>Lưu ý rằng khoảng cách giữa lithẻ và phần mở đầu của văn bản là một ký tự lập bảng (những gì bạn nhận được khi nhấn phím tab bên trong notepad).
Nếu bạn cần hỗ trợ các trình duyệt cũ hơn, bạn có thể thực hiện việc này thay thế:
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>Các câu trả lời khác tốt hơn từ quan điểm khái niệm. Tuy nhiên, bạn có thể chỉ cần ghi chú lại các số với số lượng thích hợp là '& ensp;' để làm cho họ xếp hàng.
* Lưu ý: Lúc đầu, tôi không nhận ra rằng một danh sách được đánh số đang được sử dụng. Tôi nghĩ rằng danh sách đã được tạo một cách rõ ràng.
Tôi sẽ đưa ra ở đây loại câu trả lời mà tôi thường không thích đọc, nhưng tôi nghĩ rằng vì có những câu trả lời khác cho bạn biết cách đạt được những gì bạn muốn, nên thật tuyệt khi suy nghĩ lại nếu những gì bạn đang cố gắng đạt được thực sự một ý kiến hay.
Trước tiên, bạn nên nghĩ xem liệu có nên hiển thị các mục theo cách không chuẩn, với ký tự phân cách khác với biểu tượng được cung cấp hay không.
Tôi không biết lý do cho điều đó, nhưng giả sử bạn có lý do chính đáng.
Các cách được đưa ra ở đây để đạt được bao gồm việc thêm nội dung vào phần đánh dấu của bạn, chủ yếu là vượt qua CSS: trước khi giả cổ. Nội dung này thực sự đang sửa đổi cấu trúc DOM của bạn, thêm các mục đó vào nó.
Khi bạn sử dụng số "ol" tiêu chuẩn, bạn sẽ có nội dung được hiển thị trong đó văn bản "li" có thể chọn được, nhưng số đứng trước nó không thể chọn được. Đó là, hệ thống đánh số tiêu chuẩn dường như mang tính "trang trí" nhiều hơn là nội dung thực. Nếu bạn thêm nội dung cho các số bằng cách sử dụng ví dụ như các phương thức ": trước", nội dung này sẽ có thể chọn được và tính phí cho điều này, thực hiện các sự cố vopy / dán không mong muốn hoặc các sự cố trợ năng với trình đọc màn hình sẽ đọc thêm nội dung "mới" này sang hệ thống số tiêu chuẩn.
Có lẽ một cách tiếp cận khác có thể là tạo kiểu cho các con số bằng cách sử dụng hình ảnh, mặc dù phương pháp thay thế này sẽ mang lại những vấn đề riêng (số không hiển thị khi hình ảnh bị tắt, kích thước văn bản cho số không thay đổi, ...).
Dù sao, lý do cho câu trả lời này không chỉ để đề xuất phương án thay thế "hình ảnh" này, mà là để khiến mọi người suy nghĩ về hậu quả của việc cố gắng thay đổi hệ thống số chuẩn cho các danh sách có thứ tự.
Mã này làm cho kiểu đánh số giống như tiêu đề của nội dung li.
<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute; left:16px; top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>
<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>