CSS display:inline-Eigenschaft mit list-style-image: - Eigenschaft auf <li> tags

Ich habe da ein problem mit CSS ist display:inline Eigenschaft mit der list-style-image: Eigenschaft auf <li> - tags. Im Grunde möchte ich Folgendes ausgegeben:

* Link 1  * Link 2

wo * repräsentiert ein Bild.

Mache ich dies mit dem folgenden wenig HTML:

<ol class="widgets">
    <li class="l1">Link 1</li>
    <li class="l2">Link 2</li>
</ol>

ist gestaltet mit den folgenden bisschen CSS:

ol.widgets { list-style-type:none; }

ol.widgets li { display:inline;
                margin-left:10px; }

ol.widgets li.l1 { list-style-image:url(image1.gif); }

ol.widgets li.l2 { list-style-image:url(image2.gif); }

Das problem ist, dass wenn die Elemente der Liste angezeigt werden, inline, Bilder im Zusammenhang mit der Liste Elemente nicht angezeigt. Sie tun angezeigt, wenn ich mit der display:inline Eigenschaft auf die <li> tag.

Gibt es eine Möglichkeit, damit die Bilder auch angezeigt werden, wenn die Elemente der Liste angezeigt werden, inline, oder ist das einfach unmöglich?

InformationsquelleAutor der Frage mipadi | 2008-12-09

  1. 32

    Versuchen Sie es mit float: left (oder right) statt display: inline. Inline-display ersetzt list-Element anzeigen, das ist, was fügt die Kugel Punkte.

    InformationsquelleAutor der Antwort annakata

  2. 5

    Möchten Sie die Liste Elemente, um eine Linie neben einander, aber nicht wirklich inline-Elemente. So gleiten statt:

    ol.widgets li { 
    float: left;
    margin-left: 10px;
}

    InformationsquelleAutor der Antwort flamingLogos

  3. 4

    Hatte ich ähnliches problem, ich die Lösung mit css ":bevor".. der code sieht mag dieses:

    .widgets li:before{
    content:"• ";
}

    InformationsquelleAutor der Antwort Angelo Berzacola

  4. 2

    Wenn man sich die 'display' - Eigenschaft in der CSS-spec, werden Sie sehen, dass 'list-item' ist speziell für die Art der Darstellung. Wenn Sie ein Element zu "inline", Sie ersetzen die Standard-display-Typ "Liste" -Element, und der marker ist speziell ein Teil der list-Element-Typ.

    Die obige Antwort deutet schwimmen, aber ich habe das ausprobiert und es funktioniert nicht (zumindest in Chrome). Nach den specwenn Sie Ihre Boxen zu schweben nach Links oder rechts,"Die 'display' wird ignoriert, es sei denn, es hat den Wert 'none'." Ich nehme dies bedeuten, dass die Standard display 'list-item' ist verschwunden (unter der Markierung), sobald Sie die float-element.

    Edit: Yeah, ich Schätze, ich war falsch. Siehe oben im Eintrag. 🙂

    InformationsquelleAutor der Antwort Jesse Millikan

  5. 2

    Sie wollen Stil Bild und Nav mit float zu einander dann den Einsatz, wie dies

    ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}

    InformationsquelleAutor der Antwort CSS Guy

  6. 1

    Ich würde vorschlagen, nicht zu verwenden list-style-image wie verhält es sich sehr unterschiedlich in verschiedenen Browsern, vor allem die position des Bildes

    stattdessen können Sie so etwas wie das

    ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }

    es funktioniert in allen Browsern und würde Ihnen das identische Ergebnis in verschiedenen Browsern.

    InformationsquelleAutor der Antwort Liwen

Schreibe einen Kommentar