Sıralanmamış bir liste içinde her liste öğesi için farklı simge görüntüleri kullanabilir misiniz?

Question

İleri düzey bir CSS kullanıcısı değilim, ama sanırım düzgün bir çalışma bilgim var. Her liste elemanı için farklı simgeler kullanan sıralanmamış bir liste yapmaya çalışıyorum. Ayrıca, liste öğesinin arka plan renginin üzerine gelmesini de isterim.

Bunu CSS ile gerçekleştirmenin bir yolu var mı, yoksa simge görüntüsünü liste öğesi içine dahil edermisiniz (aşağıdakine benzer)?

<li><img src="voters.jpg"><a href="voters.html">Voters</a></li> 

ul düzeyde liste tarzı-image kullanma simgelerin hepsi aynı yapar ve başka bir yol bulmaya edemedik. Bulduğum çoğu örnek, görüntüleri bir listede nasıl kullanacağınızı öğretiyor, ancak yalnızca madde işaretli görüntüler aynıysa. Bunu yapmaya çalıştığım konusunda kesinlikle önerilere ve geliştirmelere açığım.

sayesinde

<div class="content-nav"> 
    <ul> 
    <li class="instructions"><a href="instructions.html">Instructions</a></li> 
    <li class="voters"><a href="voters.html">Voters</a></li> 
    </ul> 
</div> 

.content-nav { 
    font-size:12px; 
    width:160px; 
    z-index:0; 
} 

.content-nav ul { 
    padding:0 20px; 
    margin:30px 0; 
} 

.content-nav li { 
    padding:5px; 
    margin:5px 5px; 
} 

.content-nav li a { 
    color:#666; 
    text-decoration:none; 
} 

.content-nav li.voters a { 
    background:#FFF; 
    color:#666; 
    text-decoration:none; 
    list-style-image:url(images/voters.jpg); 
} 

.content-nav li.voters a:hover { 
    background:#0CF; 
    color:#000; 
} 

.content-nav li.instructions a { 
    background:#FFF; 
    color:#666; 
    text-decoration:none; 
    list-style-image:url(images/voters.jpg); 
} 

.content-nav li.instructions a:hover { 
    background:#0CF; 
    color:#000; 
} 

Answer 1

Her liste öğesine arka plan resimleri ekleyebilir ve metni metnin içinden itmek için dolgu kullanabilirsiniz.

<ul> 
    <li class="li1">List 1</li> 
    <li class="li2">List 2</li> 
</ul> 

.li1 { 
    background:url('li1.gif') 50% 50% no-repeat no-repeat; 
    padding-left: 5px; 
} 
.li2 { 
    background:url('li2.gif') 50% 50% no-repeat no-repeat; 
    padding-left: 5px; 
} 

Sadece padding-left, her <li> elemana ilave işaretleme gerektirmez CSS3 en :nth-child() seçicinin kullanılması görüntü olarak aynı boyutta (veya biraz isterseniz daha büyük boşluk)

Answer 2

ben her liste öğesi için arka plan-resimler gibi simgeler kullanmak öneririm. Bu yaklaşımla "mermi noktalarını" kolayca konumlandırabilirsiniz (özellikle yatay konumlandırma).

Answer 3

Her liste için farklı simgeler kullanmak isterseniz, her listeye benzersiz bir ad verin ve arka plan resmi kullanın ve CSS'ye uygun şekilde yerleştirin.

Answer 4

a öğesinde list-style-image özelliğini ayarlamayı deneyin. Bunun yerine li öğesinde ayarlamayı deneyin.

Answer 5

olduğundan emin olun:

Live Demo

HTML:

<ul> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 

CSS:

ul li:nth-child(1) { 
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png'); 
} 
ul li:nth-child(2) { 
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png'); 
} 
ul li:nth-child(3) { 
    list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png'); 
} 

Tarayıcı Desteği: IE9 +, FF3.5 +, SA3.1 + OP9.5 +, CH2 +