Bildposition im Listenstil anpassen?

169

Gibt es eine Möglichkeit, die Position des Listenbilds anzupassen?

Wenn ich das Auffüllen für Listenelemente verwende, bleibt das Bild an seiner Position und bewegt sich nicht mit dem Auffüllen ...

datisdesign
quelle
1
Es ist wirklich schade, dass dies immer noch nicht in der CSS-Spezifikation enthalten ist. Was ist ein Punkt, list-style-imagewenn er nicht positioniert werden kann? Es scheint, dass als Ergebnis die meisten Leute Workarounds wie ::beforeund background-imagestattdessen verwenden.
Mentalist

Antworten:

205

Nicht wirklich. Ihre Auffüllung wird (wahrscheinlich) auf das Listenelement angewendet und wirkt sich daher nur auf den tatsächlichen Inhalt des Listenelements aus.

Durch die Verwendung einer Kombination aus Hintergrund- und Füllstilen kann etwas erstellt werden, das ähnlich aussieht, z

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

Möglicherweise möchten Sie dem übergeordneten Listencontainer (ul) ein Styling hinzufügen, um Ihre Listenelemente mit Aufzählungszeichen zu positionieren. Dieser A List Apart-Artikel enthält eine gute Startreferenz .

ein darren
quelle
1
Dadurch wird der Listenstil etwas weiter rechts als bei normalen Listenelementen platziert, was etwas "aus" ist, wenn unten normale Elemente vorhanden sind. Ich kenne die unabhängige Lösung nicht, aber abhängig von der Breite Ihres Bildes wird dies Folgendes verbessern: "margin: 0 0 0 -7px;"
E-Motiv
Bei der Top-Positionierung topfunktionierte das Ändern des Werts für mich anstelle der Top-Polsterung. background: url(images/bullet.gif) no-repeat left 8px;
Sridhar Katakam
Es ist wirklich schade, dass Sie den Listenstil nicht direkt stylen können. Es bringt die Leute dazu, alle möglichen Problemumgehungen zu verwenden. Ich würde es wirklich vorziehen, den Listenstil für etwas zu verwenden, das wirklich ein Listenstil ist, aber ich kann es nicht so aussehen lassen, wie ich es möchte.
mcv
75

Normalerweise verstecke ich den Listenstil und verwende ein Hintergrundbild, das beweglich ist

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

Das "7px 7px" richtet das Hintergrundbild innerhalb des Elements aus und ist auch relativ zum Auffüllen.

NickGPS
quelle
21

Eine mögliche Lösung für diese Frage, die noch nicht erwähnt wurde, ist die folgende:

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

Sie können jetzt den oberen / linken Rand des li: before verwenden, um die neue Kugel zu positionieren. Beachten Sie, dass die Breite und Höhe des li: before die gleichen Abmessungen wie das von Ihnen ausgewählte Hintergrundbild haben müssen. Dies funktioniert in Internet Explorer 8 und höher.

Ramon de Jesus
quelle
Dies ist meiner Meinung nach die beste Lösung. Wenn Sie das Pseudoelement :: before nach links verschieben, erzielen Sie den gleichen Effekt.
TaylorMac
12

Ich hatte das gleiche Problem, aber ich konnte die Hintergrundoption nicht verwenden (und wollte nicht mehrere Hintergründe verwenden), also dachte ich über eine andere Lösung nach

Dies ist ein Beispiel für ein Menü mit einem quadratischen Indikator für den aktiven / aktuellen Menüpunkt (der Standardlistenstil ist in einer anderen Regel auf "Keine" festgelegt).

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

Es erstellt ein Quadrat unter Verwendung eines quadratischen Zeichens mit der Pseudoklasse ": before" und kann durch Verwendung der absoluten Positionierung frei positioniert werden.

lad1337
quelle
8

Folgendes habe ich getan, damit kleine graue Blöcke auf der linken Seite und in der Mitte des Textes mit einer erhöhten Zeilenhöhe angezeigt werden:

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

Hoffe das hilft jemandem: D.

kaed
quelle
6

Die Lösung, für die ich mich am Ende entschieden habe, bestand darin, das Bild selbst zu ändern, um einen gewissen Abstand hinzuzufügen.

Die Verwendung eines Hintergrundbilds auf dem Li funktioniert in vielen Fällen, schlägt jedoch fehl, wenn die Liste neben einem schwebenden Bild verwendet wird (z. B. um den Text um das Bild zu wickeln).

Hoffe das hilft.

zeds
quelle
6

Eine weitere Option, die Sie ausführen können, ist die folgende:

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

Verwenden Sie (0 3px), um das Listenbild zu positionieren.

Funktioniert in IE8 +, Chrome, Firefox und Opera.

Ich verwende diese Option, weil Sie den Listenstil einfach austauschen können und wahrscheinlich nicht einmal ein Bild verwenden müssen. (Geige unten)

http://jsfiddle.net/flashminddesign/cYAzV/1/

AKTUALISIEREN:

Dies berücksichtigt Text / Inhalt in der zweiten Zeile:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

Fügen Sie padding-left: zum li hinzu, wenn Sie mehr Platz zwischen dem Aufzählungszeichen und dem Inhalt wünschen.

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

McLeodWebDev
quelle
1
Die aktualisierte Version wird die zusätzliche Zeile JSfiddle
McLeodWebDev
6

Oder Sie können verwenden

list-style-position: inside;
Mathias Maes
quelle
3

Ich denke, was Sie wirklich tun möchten, ist das Auffüllen (Sie fügen gerade das <li> hinzu) zum <ul> -Tag hinzuzufügen, und dann werden die Aufzählungspunkte mit dem Text des <li> verschoben.

Es gibt auch die Position im Listenstil, in die Sie schauen könnten. Dies wirkt sich darauf aus, wie sich die Linien um die Aufzählungszeichen wickeln.


quelle
3

wie "a darren" Antwort, aber geringfügige Änderung

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

Es funktioniert browserübergreifend. Passen Sie einfach die Polsterung und den Rand an

Für verschachtelt bearbeiten: Fügen Sie diesen Stil hinzu, um der unterverschachtelten Liste den linken Rand hinzuzufügen

ul ul {Rand links: 15px; }}

khaled_webdev
quelle
3

Ich benutze so etwas, scheint mir ziemlich sauber und einfach zu sein:

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

Der obige Code funktioniert wie in den meisten meiner Fälle.
Für eine genaue Einstellung können Sie Folgendes ändern vertical-align: z.

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

Sie können festlegen list-style: noneauf listatt , ulwenn Sie es vorziehen.

jj
quelle
0

Ich finde die akzeptierte Antwort ein bisschen fudge, viel zu viel muss mit zusätzlichen Padding- und CSS-Befehlen angerempelt werden.

Ich füge niemals Auffüllungen hinzu, um Elemente persönlich aufzulisten. Normalerweise steuere ich deren Zeilenhöhe und der gelegentliche Rand reicht aus.

Wenn ich ein Ausrichtungsproblem mit benutzerdefinierten Bildern im Listenstil habe, füge ich einfach ein oder zwei Pixel zusätzlichen Platz um die Seite hinzu, die zum Anpassen der Position relativ zu jeder Listenzeile erforderlich ist.

AdamJones
quelle
Sie mussten sich noch nie mit browserübergreifendem Rendern befassen, nicht wahr?
Volker E.
0

Lösung mit fontawesome

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}
Fatih Topcu
quelle
0

Blenden Sie das Standard-Aufzählungszeichen aus und verwenden background-imageSie es, da Sie viel mehr Kontrolle haben wie:

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}
<ul>
<li>foo</li>
<li>bar</li>
</ul>

Ronnie Royston
quelle
0

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}

Bartłomiej Kuźniar
quelle