Sırasız listede madde işaretleri yerine tik / onay işareti simgesi (✓) nasıl kullanılır?

85

Liste metninden önce tik sembolü eklemek istediğim bir listem var. Bu şekilde uygulamama yardımcı olabilecek herhangi bir CSS var mı?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

Not: Bunu bu tür HTML kodunda istiyorum

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Snippet'i genişlet

css html special-characters

— Stack-overflow-kahraman
kaynak

150

Bu karakteri her liste öğesinden önce eklemek için sözde bir öğe kullanabilirsiniz:

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Snippet'i genişlet

— Josh Crozier
kaynak

Bunu kullandım ve Chrome 65'te çalışıyor. Her bir <li> 'yi normalde 1px düz kenarlık kullanarak, ul li üzerinde sola ve sağa kaydırarak kaydırabildim: daha önce - kenarlık rengini öğenizin arka planına ayarlayabilirsiniz.

— ymasood

Çözüm için teşekkürler! Kaydırmada girintinin kaybolduğuna dair bir not ekledim. (Yazıyı düzenlemek için Özür dileriz, ama sadece bir yorum daha iyi sorunu gösteren en ayrıldığını ve umarım bununla başa çıkmanın bir yolunu bulabilirsiniz.)

— Dan Dascalescu

@Josh: Adam'ın cevabının paketleme sorununa bir çözümü var. Eklemek için size bağlı olarak anlaşılır olması için düzenledim.

— Dan Dascalescu

35

Kullanabileceğiniz üç farklı onay işareti stili şunlardır:

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul><!-- not working on Stack snippet; check fiddle demo -->
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Snippet'i genişlet

jsFiddle

Referanslar:

— Michael Benjamin
kaynak

Bu Josh Crozier'in cevabından farklı değil ve aynı sorunla sarma üzerindeki girintiyi yok ediyor . Ayrıca, son karakter Chromium / Ubuntu'da da keman içinde görünmüyor, ancak yine de asıl mesele bu - Josh'un cevabı çözümün özü. Hangi onay işareti karakterlerinin kullanılacağı bir tasarım seçimidir.

— Dan Dascalescu

1

@DanDascalescu, bu yanıt, Josh Crozier'in çözümünü, bazı kişilerin bilmeyebileceği onay işareti seçenekleri sunarak genişletiyor. Bu değerli bilgidir. Bunların "tasarım seçenekleri" olması, bu yanıtı daha az kullanışlı hale getirmez. Benim görüşüme göre olumsuz oyunuz haksızdır: (1) yanıt birçok insan için yararlı olmuştur (ve yaklaşık 30 olumlu oy almıştır), (2) yanıt stil seçimlerinden başka bir şeymiş gibi görünmüyor ve (3) ben başka sorunların üstesinden gelmeye çalışmıyordu (ki bu sizin de söylediğiniz gibi, "yine de

— Michael Benjamin

1

Gördüğüm "\ 2713" ve "\ 2714" onay işareti seçenekleri ham Unicode kod noktaları. Nasıl göründüklerini göremiyorum. Cevap stil seçimleri vermek istiyorsa, bazı gerçek onay işaretleri içerebilir: ✓, ✔, ☑, ✅. Hangi onay işaretinin kullanılacağı ilginç bir sorun değildir. Onay işaretleri nasıl kullanılır? Bunu, "Şu anda suda olan bir tekneyi nasıl boyarım" ile "Onu hangi mavi tonlarını boyayabilirim" olarak görüyorum. bu mantıklı mı?

— Dan Dascalescu

Bu yanıtı dilediğiniz bakış açısıyla görme hakkına sahipsiniz. Senin fikrinle tartışmayacağım. Gerçek şu ki, bu yazıyı ziyaret eden insanların büyük çoğunluğu bu cevabı faydalı buluyor. Bunu öyle bırakacağım. Geri dönüşünüz için teşekkür ederiz. @DanDascalescu

— Michael Benjamin

2

İnsanlar pek çok farklı nedenden dolayı olumlu oy kullanıyor. İnsanlar sizinkinden farklı nedenlerle oy kullanıyor. Bu cevabın içeriğine katılmıyorsunuz. Cevabın yanlış veya güncel olmadığını söylemiyorsunuz (atıfta bulunduğunuz bağlantılarda olduğu gibi), sadece beğenmiyorsunuz. Bu benimle iyi. Fikrinize hakkınız var.

— Michael Benjamin

25

Çözüme ek olarak:

ul li:before {
 content: '✓'; 
}

Font Aswesome gibi herhangi bir SVG simgesini içerik olarak kullanabilirsiniz .

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Snippet'i genişlet

Not: Diğer yanıtların sahip olduğu paketleme sorununu çözmek için:

her birinin solunda 1.5m ems alan ayırıyoruz <li>
daha sonra SVG'yi bu boşluğun başlangıcına yerleştirin ( position: absolute; left: 0)

İşte daha fazla Font Awesome siyah simgesi .

Renkleri nasıl ekleyebileceğinizi ve boyutlarını nasıl değiştirebileceğinizi görmek için bu CODEPEN'i kontrol edin .

— Adam Orlov
kaynak

8

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

bu basit css stilini kullanabilirsiniz

ul {
     list-style-type: '\2713';
   }

— Hitendra Singh Shekhawat
kaynak

Adam'ın cevabı ambalajlama sorununa değindi, ancak tonlarca ekstra kod gerekiyordu ... bu işe yarıyor. Boşluk benim için bir dokunuş değildi, bu yüzden onay işaretini <li> işaretinden ayırmak için sonuna fazladan bir \ 1 \ 1 ekledim.

— Jaden Baptista