Bildposition im Listenstil anpassen?

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 ...

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 .

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.

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.

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.

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.

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.

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/

Oder Sie können verwenden

list-style-position: inside;

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.

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; }}

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.

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.

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;}

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>