Tôi đang cố gắng tạo kiểu cho các số trong danh sách có thứ tự, tôi muốn thêm màu nền, bán kính đường viền và màu sắc để chúng khớp với thiết kế mà tôi đang làm việc:
Tôi đoán là không thể và tôi sẽ phải sử dụng các hình ảnh khác nhau cho mỗi số tức là
ol li:first-child {list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');}
etc...
Có giải pháp nào đơn giản hơn không?
Câu trả lời:
Bạn có thể thực hiện việc này bằng cách sử dụng bộ đếm CSS , kết hợp với :beforephần tử giả:
ol {
list-style: none;
counter-reset: item;
}
li {
counter-increment: item;
margin-bottom: 5px;
}
li:before {
margin-right: 10px;
content: counter(item);
background: lightblue;
border-radius: 100%;
color: white;
width: 1.2em;
text-align: center;
display: inline-block;
}<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>counter-reset: item;phải đi trong khối ol, nếu không bộ đếm sẽ không được đặt lại trong <ol> lồng nhau.
liphần tử có nhiều hơn một dòng?
50%for border-radius(thay vì 100%) là đủ để nhận được một hình tròn. (Xem, ví dụ, Lea Verou, " Trường hợp gây tò mò về bán kính biên giới: 50% ", ngày 30 tháng 10 năm 2010.)
li position: relative;, sau đó :beforebạn cho điều đó position: absolute;và sau đó sử dụng topvà leftđịnh vị nó chính xác như bạn muốn.
Tôi đang tìm kiếm một cái gì đó khác biệt và tìm thấy ví dụ này tại CodePen;
hãy thử cái này: http://codepen.io/sawmac/pen/txBhK
body {
font-size: 1.2em;
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 50px;
}
.custom-counter {
margin: 0;
padding: 0;
list-style-type: none;
}
.custom-counter li {
counter-increment: step-counter;
margin-bottom: 5px;
}
.custom-counter li::before {
content: counter(step-counter);
margin-right: 20px;
font-size: 80%;
background-color: rgb(180, 180, 180);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 11px;
}<ol class="custom-counter">
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
<li>This is the fourth item</li>
<li>This is the fifth item</li>
<li>This is the sixth item</li>
</ol>