Sıralı liste numaralarını biçimlendirebilir misiniz?

Sıralı bir listedeki sayıları biçimlendirmeye çalışıyorum, çalıştığım tasarımla eşleşmeleri için arka plan rengi, kenarlık yarıçapı ve renk eklemek istiyorum:

görüntü açıklamasını buraya girin

Sanırım bu mümkün değil ve her numara için farklı resimler kullanmam gerekecek.

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

Daha basit bir çözüm var mı?

— Pixelomo
kaynak

Burada demomumdan bir çözüm araştırabilirsiniz jsfiddle.net/viphalongpro/Hj8Nn BTW, bunun aranmasının imkansız olduğunu düşünmüyorum , ilk arama size pek çok sonuç verebilir , tam da SO'da, bu tür sorular oldu birçok kez sordu.

— King King

bilgi için bazı bağlantılar 1. codeitdown.com/ordered-list-css-styles 2. css-tricks.com/numbering-in-style İyi bir qtn, ancak biraz arama yapmak size cevabı verebilir

— crafter

@KingKing - Ben ... sonra tekrarı olarak bu işaretleme önermek istiyorum

— Lee Taylor

Yanıtlar:

189

Sözde öğe ile birlikte CSS sayaçlarını kullanarak bunu yapabilirsiniz :before:

 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>

Snippet'i genişlet

— SW4
kaynak

counter-reset: item;Aksi sayaç yuvalanmış <ol> sıfırlama olmayacak ol bloğunda gitmek gerekir.

— Michael Klöpzig

güzel bir çözüm, ama lielemanın gövdesi birden fazla satır olduğunda render nasıl oluyor ?

— cmhughes

Bence stackoverflow.com/questions/13354578/… 'de olduğu gibi, örneğin `margin-left: -2.0em; genişlik: -2.0em; `

— cmhughes

Bir daire elde etmek için 50%for border-radius(yerine 100%) değeri yeterlidir. (Bkz. Örneğin, Lea Verou, " Sınır yarıçapının ilginç durumu:% 50 ," 30 Ekim 2010.)

— Jim Ratliff

@cmhughes - eğer bunu yapmak istersen, verirsin li position: relative;ve sonra :beforebunu verirsin position: absolute;ve sonra tam olarak istediğin gibi kullanır topve leftkonumlandırırsın.

— mike

Farklı bir şey arıyordum ve bu örneği CodePen'de buldum;

bunu deneyin: 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>

Snippet'i genişlet

— Russ
kaynak