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

stimmen
17

Ich habe ein Problem CSS die Verwendung display:inlinemit der Eigenschaft list-style-image:Eigenschaft auf <li>Tags. Grundsätzlich möchte ich die Ausgabe wie folgt zusammen :

* Link 1  * Link 2

wo *stellt ein Bild dar.

Ich tue dies mit dem folgenden Stück HTML:

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

die mit dem folgende Bit von CSS gestylt:

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 Listenelemente inline angezeigt werden, die Bilder mit den Listeneinträgen zugeordnet werden nicht angezeigt. Sie haben scheinen , wenn ich die nehmen display:inlineauf dem Grundstück <li>Tag.

Gibt es eine Möglichkeit die Bilder erscheinen zu machen, auch wenn die Listenelemente inline angezeigt werden, oder ist das nur möglich?

Veröffentlicht am 09/12/2008 um 22:25
quelle vom benutzer
In anderen Sprachen...                            


6 antworten

stimmen
32

Versuchen Sie es mit float: left(oder right) statt display: inline. Inline - Anzeige ersetzt list-item - Display, das ist es, was die folgenden Punkte hinzufügt.

Beantwortet am 09/12/2008 um 22:30
quelle vom benutzer

stimmen
5

Sie wollen, dass die Listenelemente nebeneinander aufreihen, aber nicht wirklich Inline-Elemente sein. So schweben sie statt:

ol.widgets li { 
    float: left;
    margin-left: 10px;
}
Beantwortet am 09/12/2008 um 22:33
quelle vom benutzer

stimmen
4

Ich hatte ähnliches Problem, löse ich mit CSS „: vor“ .. Der Code sieht gefällt das:

.widgets li:before{
    content:"• ";
}
Beantwortet am 10/07/2013 um 16:02
quelle vom benutzer

stimmen
2

Sie möchten Stil Bild und Nav mit Schwimmer zueinander dann wie folgt verwenden

ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
Beantwortet am 05/07/2012 um 12:43
quelle vom benutzer

stimmen
2

Wenn man sich anschaut , die Eigenschaft ‚display‘ in der CSS - Spezifikation, werden Sie sehen , dass ‚list-item‘ ist speziell eine Anzeigetyp. Wenn Sie ein Element auf „inline“ gesetzt, sind zu ersetzen Sie die Standardanzeige Listentyp-Element, und der Marker ist speziell ein Teil des Listenelementtypen .

Die obige Antwort deutet darauf hin , Schwimmer, aber ich habe das versucht , und es funktioniert nicht (zumindest auf Chrome). Gemäß der Spezifikation , wenn Sie setzen Ihre Boxen nach links oder rechts zu schweben : „Die‚display‘ werden ignoriert, es sei denn , es den Wert‚none‘hat.“ Ich nehme dies bedeutet , dass der Standardanzeigetyp ‚list-item‘ gegangen ist (wobei die Markierung mit ihm), sobald Sie das Element schweben.

Edit: Ja, ich glaube, ich war falsch. Siehe oben Eintrag. :)

Beantwortet am 09/12/2008 um 22:38
quelle vom benutzer

stimmen
1

Ich würde vorschlagen , nicht zu verwenden list-style-image, da es ganz anders in verschiedenen Browsern verhält, vor allem die Bildposition

stattdessen kannst du so etwas wie diese verwenden

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ürden Sie das gleiche Ergebnis in verschiedenen Browsern geben.

Beantwortet am 09/12/2008 um 22:44
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more