HTML-Liste mit verschiedenen Bildern als Aufzählungszeichen

Ich weiß, es ist möglich, um ein Bild anstelle von HTML-Standard Aufzählungszeichen:

list-style-image: url(...);

Aber ich haben keinen Weg gefunden, wie ich einstellen kann verschiedene Bilder in ein und der selben Liste. e.G.: Anstelle der ersten Kugel, img_1 angezeigt wird, anstatt die nächsten 5 Kugeln img_2 angezeigt wird ... .

InformationsquelleAutor Hansi Zimmrer | 2014-01-16
  1. 4

    HTML- 

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

    CSS(funktioniert nicht auf IE 7,8)-

    ul li:nth-child(1){
list-style-image:url('image1.png');
}
ul li:nth-child(2){
list-style-image:url('image2.png');
}
ul li:nth-child(3){
list-style-image:url('image3.png');
}

    CSS für alle Browser einschließlich IE 7,8

    ul li:first-child{
list-style-image:url('image1.png');
}
ul li:first-child + li{
list-style-image:url('image2.png');
}
ul li:first-child + li + li{
list-style-image:url('image3.png');
}
ul li:first-child + li + li + li{
list-style-image:url('image4.png');
}
    • Dieses funktioniert ganz gut für mich, denn ich habe ein anderes Bild für jede Kugel. Außerdem, für mich scheint es der "sauberste" Variante. Wenn ich habe eine Bild für eine Reihe von Kugeln,ich gehe lieber für die Klasse version.
    • Zur info: das nth-child-Selektor funktioniert nicht in IE8, denken Sie also an die browser-Unterstützung, bevor mit dem nth-child-Selektor
    • scheint Zut-code, wenn Sie nur könnte die Verwendung von Klassen.
    InformationsquelleAutor arifix
  2. 3

    Fügen Sie einfach eine andere Klasse in das LI-element

    <ul class="navlist">
    <li class="img_1">element1</li>
    <li class="img_2">element2</li>
</ul>
<style>
.navlist li.img_1
{
padding-left: 10px;
background-image: url(images/image1.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
.navlist li.img_2
{
padding-left: 10px;
background-image: url(images/image2.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
</style>
    InformationsquelleAutor cardeol
  3. 2

    Müssen Sie nth-child Eigenschaft

    CSS

    li:nth-child(1){list-style-image:url(image)}

    Hier ist die demo http://jsfiddle.net/5VB2u/

    InformationsquelleAutor Dinesh Kanivu
  4. 1

    Ich denke, Sie können dies tun, mit Klassen

    <li class="first"></li>
<li class="second"></li>
...

li.first {
  ⋮ declarations
}

li.second {
  ⋮ declarations
}
...

    oder die nth-child-Selektor

    li:nth-child(1) {
  ⋮ declarations
}

li:nth-child(2) {
  ⋮ declarations
}
...
    • Zur info: das nth-child-Selektor funktioniert nicht in IE8, denken Sie also an die browser-Unterstützung, bevor mit dem nth-child-Selektor
    InformationsquelleAutor chris
  5. 1

    du haben/können Klassen in Ihrer Liste Elemente:

    <ul>
  <li class="bar>
   <a href="#" title="foo">Foo</a>
  </li>
  <li class="foo>
   <a href="#" title="bar">Bar</a>
  </li>
</ul>

    CSS für Bilder als Aufzählungszeichen für <li>

    ul {
  list-style: none;
}
li {
 padding-left: 25px; /*adjust to your needs*/
}
li.bar {
  background: url(img_2.png) no-repeat 0 50%;
}
li.foo {
  background: url(img_1.png) no-repeat 0 50%;
}

    CSS für Bilder als Aufzählungszeichen für <a>

    ul {
  list-style: none;
}
li a {
 padding-left: 25px; /*adjust to your needs*/
 display: block;
}
li.bar a {
  background: url(img_2.png) no-repeat 0 50%;
}
li.foo a {
  background: url(img_1.png) no-repeat 0 50%;
}
    • Ich fragte, für eine Kugel-Bild. Ist es wirklich dasselbe, wenn ich den background css-Attribut?
    • ja, es ist das gleiche, wenn Sie wollen die volle Kontrolle über die Bilder, die in einer Liste als Kugel-Ersatz
    • Vollzugriff bedeutet, kann ich auch jene Bilder, die als links?
    • wenn Sie fügen Sie diese als hintergrund-Bild auf Ihrer <a> die <li>? ja
    InformationsquelleAutor Mark
Schreibe einen Kommentar