it-swarm-tr.com

Bir merminin rengini listeden değiştirmenin kolay bir yolu var mı?

Tek istediğim listedeki bir merminin rengini açık griye çevirebilmektir. Varsayılan olarak siyah olur ve nasıl değiştirileceğini çözemiyorum.

Sadece bir görüntü kullanabileceğimi biliyorum; Yardım edebilirsem bunu yapmamayı tercih ederim.

81
Dave Haynes

Madde işareti, metinden rengini alır. Dolayısıyla, listenizdeki metinden farklı bir renk mermisine sahip olmak istiyorsanız, biraz biçimlendirme eklemeniz gerekir.

Liste metnini bir alana kaydırın:

<ul>
  <li><span>item #1</span></li>
  <li><span>item #2</span></li>
  <li><span>item #3</span></li>
</ul>

Sonra stil kurallarınızı biraz değiştirin:

li {
  color: red; /* bullet color */
}
li span {
  color: black; /* text color */
}
156
Prestaul

Bunu işaretleme eklemeden başardım, ama bunun yerine li: before kullanarak. Bu açıkça :before (eski IE desteği yok) tüm sınırlamalarına sahip, ancak çok sınırlı bir testten sonra IE8, Firefox ve Chrome ile çalışıyor gibi görünüyor. Kontrolör ortamında çalışıyor, kimsenin bunu kontrol edip edemeyeceğini merak ediyor. Mermi stili aynı zamanda unicode'da olanlar ile sınırlıdır.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    li {
      list-style: none;
    }

    li:before {
      /* For a round bullet */
      content:'\2022';
      /* For a square bullet */
      /*content:'\25A0';*/
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -10px;
      top: -0px;
      color: green;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</body>
</html>
44
Marc

Bu 2008'de imkansızdı, ama yakında mümkün olacak (umarım)!

W3C CSS3 spesifikasyonu 'a göre, ::marker sözde elemanı .. __ olan bir liste öğesinden önce oluşturulan herhangi bir sayı, glif veya diğer sembol üzerinde tam kontrole sahip olabilirsiniz. Bunu en çok oy alan cevap sahibine uygulamak için çözüm:

<ul>
  <li>item #1</li>
  <li>item #2</li>
  <li>item #3</li>
</ul>

li::marker {
  color: red; /* bullet color */
}
li {
  color: black /* text color */
}

JSFiddle Örneği

Bununla birlikte, Temmuz 2016'dan itibaren, bu çözümün W3C Çalışma Taslağının yalnızca bir parçası olduğunu ve henüz büyük tarayıcılarda çalışmadığını unutmayın.

Bu özelliği istiyorsanız, şunları yapın:

16
Supuhstar
<ul>
  <li style="color: #888;"><span style="color: #000">test</span></li>
</ul>

bu yöntemde en büyük sorun ekstra işaretlemedir. (span etiketi)

5
Jonathan Arkell

Sadece bir grafik programında bir mermi yapın ve list-style-image kullanın:

ul {
  list-style-image:url('gray-bullet.gif');
}
2
ghr

Merhaba belki bu cevap gecikti ama bunu başarmak için doğru cevap.

Tamam, gerçek metnin normal metinde siyah olmasını (veya ne elde etmek istediğinizi) sağlamak için dahili bir etiket belirtmeniz gerekir. Ancak, CSS ile herhangi bir TAGS ve dahili etiketi REDEFINE edebileceğiniz de doğrudur. Yani bunu yapmanın en iyi yolu yeniden tanımlamak için bir SHORTER etiketi kullanmak.

Bu CSS tanımını kullan:

li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }

Ve bu html kodu:

<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>

Gerekli sonucu alırsınız. Ayrıca her diski farklı renkte yapabilirsiniz:

<ul>
    <li class="c1"><b>Text 1</b></li>
    <li class="c2"><b>Text 2</b></li>
    <li class="c3"><b>Text 3</b></li>
 </ul>
2
Dragnovich

Metni liste öğesinin içine bir yayılma alanı (veya başka bir öğe) ile sarın ve madde işareti rengini liste öğesine ve metin rengini yayılma alanına uygulayın.

0
user4903

Her bir eleman için renk belirlersek de işe yarar, örneğin:

<article class="event-item">
    <p>Black text here</p>
</article>

.event-item{
    list-style-type: disc;
    display: list-item;
    color: #ff6f9a;
     margin-left: 25px;
}
.event-item p {
    margin: 0;
    color: initial;
}
0
Mohammed

W3C spesifikasyonuna göre

List özellikleri ... yazarların liste işaretçisi için farklı stiller (renkler, fontlar, hizalama vb.) Belirlemelerine izin vermez ...

Ancak yukarıdaki listede bir açıklığa sahip olan fikir iyi çalışmalıdır!

0
Aeon

Çok sayıda sayfanız varsa ve biçimlendirmeyi kendiniz düzenlemeye gerek yoksa Jquery'yi kullanabilirsiniz.

i̇şte basit bir örnek:

$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
0
alaasdk
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
0
User

2008 sorusu için, bir listedeki mermi rengini nasıl değiştireceğinize dair daha yeni ve güncel bir cevap ekleyebileceğimi düşündüm.

Harici kütüphaneleri kullanmak istiyorsanız, Font Awesome size ölçeklenebilir vektör simgeleri verir ve Bootstrap yardımcı sınıfları ile birleştirildiğinde [örn. (__. text-success), çok güzel ve özelleştirilebilir listeler yapabilirsiniz.

Aşağıdaki Font Awesome listesi örnekleri sayfasından ekstraktına genişlemiş oldum:

Sırasız listelerdeki varsayılan madde imlerini kolayca değiştirmek için fa-ul ve fa-li kullanın.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<ul class="fa-ul">
  <li><i class="fa-li fa fa-circle"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li>
  <li><i class="fa-li fa fa-square text-danger"></i>in lists</li>
</ul>

Yazı tipi Awesome (çoğunlukla) IE8 'i destekler ve yalnızca eski sürüm 3.2.1 kullanıyorsanız IE7'yi destekler.

0
eggy