trả lời Revised:jsFiddle Pure CSS Solution
Dưới đây là một phương pháp điều chỉnh mà không sử dụng khuôn khổ jQuery ban đầu của OP, một yêu cầu đó không phải là đã hoàn thành trong câu trả lời trước của tôi. Phương thức đó đã sử dụng jQuery hiện có để áp dụng một trình bao bọc span cho phần tử li vì sửa đổi HTML trực tiếp là không thể.
phương pháp mới này sử dụng CSS Pseudo selectors :before và :after cùng với CSS 2.1 counter chức năng có thể có nó là danh sách số cách điệu để không wrapper jQuery là cần thiết. Trong thực tế, bản sửa đổi jsFiddle hiển thị các số sử dụng phông chữ phông chữ Google @.
Sử dụng chức năng CSS truy cập được thực hiện bằng cách tuyên bố một tên biến để sử dụng trong các yếu tố ul, sau đó incrementing quầy trong các yếu tố :before cũng như sử dụng nó như là nội dung thực tế.
Ví dụ đơn giản:jsFiddle CSS Counter
HTML:
<ul>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
<li>A numbered list that's stylized!</li>
</ul>
CSS:
ul{
list-style-type: none;
white-space: nowrap;
margin: 0;
padding: 0;
width: 210px;
height: 200px;
overflow: auto;
border: 3px solid royalblue;
/* Setup the counter. */
counter-reset: yourVariableName;
}
li:before{
/* Advance the number. */
counter-increment: yourVariableName;
/* Use the counter number as content. */
content: 'Item ' counter(yourVariableName) ': ';
color: royalBlue;
font-family: 'Impact';
}
Tìm hiểu thêm về bộ đếm CSS HERE.
Câu trả lời ban đầu của tôi sử dụng khung hiện có trong câu hỏi của OP được hiển thị bên dưới.
Tôi đã xem kỹ câu hỏi của bạn và sau đó xem trang web của bạn.
Dưới đây là giải pháp cần thiết: jsFiddle
Để tóm tắt, đây là các quy tắc CSS thay thế mà làm cho nó hoạt động:
#secondary ol {
color:#F60;
margin-bottom:0;
margin-left: 0px; /* Since 'ul,ol{}' setting in line 108 affects this selector, 'margin-left' is redefined. */
list-style-position: inside; /* This will place the number on top and inside of the current color of li */
}
.notes{
color:#333;
width: 230px;
heigh: 50px;
display: inline-block;
vertical-align:text-top;
}
Kết quả:
Extra: dụ Phiên bản này nhấn mạnh những con số: jsFiddle
* Bạn muốn tạo kiểu gì? – poepje
Xin lỗi, điều đó không rõ ràng! Các số trong danh sách ở phía bên tay phải. Sẽ chỉnh sửa câu hỏi của tôi. Cảm ơn. –