Bisakah Anda mengatur gaya nomor daftar?

91

Saya mencoba mengatur gaya angka dalam daftar berurutan, saya ingin menambahkan warna latar belakang, radius batas, dan warna sehingga cocok dengan desain tempat saya bekerja:

masukkan deskripsi gambar di sini

Saya kira itu tidak mungkin dan saya harus menggunakan gambar yang berbeda untuk setiap nomor yaitu

ol li:first-child {list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');} 
etc...

Apakah ada solusi yang lebih sederhana?

html css html-lists sprite Pixelomo
sumber
3
Anda dapat mencari solusi dari demo saya di sini jsfiddle.net/viphalongpro/Hj8Nn BTW, saya rasa ini tidak mungkin untuk mencari, mencari terlebih dahulu mungkin memberi Anda banyak hasil , tepat di SO, pertanyaan semacam ini telah bertanya berkali-kali.
Raja Raja
1
beberapa tautan untuk info 1. codeitdown.com/ordered-list-css-styles 2. css-tricks.com/numbering-in-style Ini adalah qtn yang bagus, tetapi sedikit pencarian mungkin akan memberi Anda jawabannya
perajin
1
@KingKing - Saya sarankan menandai ini sebagai duplikat lalu ...
Lee Taylor

Jawaban:

189

Anda dapat melakukan ini menggunakan penghitung CSS , sehubungan dengan :beforeelemen pseudo:

 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>
Luaskan cuplikan

SW4
sumber
12
Ini counter-reset: item;harus berada di blok ol, jika tidak, penghitung tidak akan diatur ulang di <ol> bersarang.
Michael Klöpzig
2
solusi yang bagus, tetapi bagaimana rendering ketika tubuh lielemen lebih dari satu baris?
cmhughes
Saya pikir, seperti di stackoverflow.com/questions/13354578/… , Anda dapat menggunakan misalnya `margin-left: -2.0em; lebar: -2.0em; `
cmhughes
Nilai 50%untuk border-radius(daripada 100%) cukup untuk mendapatkan lingkaran. (Lihat, misalnya, Lea Verou, " Kasus aneh radius-perbatasan: 50% ," 30 Oktober 2010.)
Jim Ratliff
@cmhughes - jika Anda ingin melakukan itu, Anda akan memberikannya li position: relative;, dan kemudian :beforememberikannya position: absolute;lalu menggunakan topdan leftmemposisikannya persis seperti yang Anda inginkan.
mike
25

Saya sedang mencari sesuatu yang berbeda, dan menemukan contoh ini di CodePen;

coba ini: 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>
Luaskan cuplikan

Russ
sumber