Regola la posizione dell’immagine in stile elenco?

C’è un modo per regolare la posizione di list-style-image?

Quando uso il padding per gli elementi dell’elenco l’immagine rimarrà nella sua posizione e non si muoverà con il padding …

Non proprio. Il tuo padding è (probabilmente) applicato all’elemento dell’elenco, quindi influenzerà solo il contenuto effettivo all’interno dell’elemento dell’elenco.

Usando una combinazione di stili di sfondo e padding puoi creare qualcosa che assomiglia ad es

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

Se si desidera aggiungere uno stile al contenitore dell'elenco principale (ul) per posizionare gli elementi dell'elenco puntato, questo articolo di A List Apart ha un buon riferimento iniziale.

Normalmente nascondo il tipo di stile lista e utilizzo un’immagine di sfondo, che è mobile

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

Il “7px 7px” è ciò che allinea l’immagine di sfondo all’interno dell’elemento ed è anche relativo al padding.

Una ansible soluzione a questa domanda che non è stata ancora menzionata è la seguente:

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

È ora ansible utilizzare la parte superiore / sinistra del li: prima per posizionare il nuovo punto elenco. Si noti che la larghezza e l’altezza del li: prima devono essere le stesse dimensioni dell’immagine di sfondo che si sceglie. Funziona su Internet Explorer 8 e versioni successive.

Ho avuto lo stesso problema, ma non ho potuto usare l’opzione background (e non volevo usare più sfondi), quindi ho pensato ad un’altra soluzione

questo è un esempio per un menu che ha un indicatore di forma quadrata per la voce di menu triggers / corrente (lo stile di elenco predefinito è impostato su Nessuno in un’altra regola)

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

crea un quadrato usando un carattere quadrato con la pseudo class “: before” ed è liberamente posizionabile usando il posizionamento assoluto.

Ecco cosa ho fatto per ottenere piccoli blocchi grigi sul lato sinistro e al centro del testo con un aumento di altezza della linea:

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

Spero che questo aiuti qualcuno: D

Alla fine, la soluzione alla quale ho optato è stata modificare l’immagine stessa per aggiungere un po ‘di spaziatura.

Usando un’immagine di sfondo sul li come alcuni suggeriscono di funzionare in molti casi ma falliscono quando l’elenco viene usato insieme a un’immagine fluttuante (ad esempio per far sì che il testo avvolga l’immagine).

Spero che questo ti aiuti.

O puoi usare

 list-style-position: inside; 

Un’altra opzione che puoi fare è la seguente:

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

Usa (0 3px) per posizionare l’immagine della lista.

Funziona in IE8 +, Chrome, Firefox e Opera.

Uso questa opzione perché puoi scambiare facilmente lo stile elenco e una buona possibilità che tu non debba nemmeno usare un’immagine. (violino sotto)

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

AGGIORNARE:

Questo renderà conto del testo / contenuto andando nella seconda riga:

 ul{ list-style-type:none; } li{ position:relative; } ul li:before{ content:'>'; padding:0 10px 0 0; position:absolute; top:0; left:-10px; } 

Aggiungi padding-left: a li se vuoi più spazio tra il proiettile e il contenuto.

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

Penso che quello che vuoi veramente sia aggiungere il padding (che stai attualmente aggiungendo al

  • ) al tag
      e poi i punti elenco si sposteranno con il testo di

    • .
  • C’è anche la posizione in stile elenco che potresti esaminare. Colpisce il modo in cui le linee si avvolgono attorno alle immagini del proiettile.

    come una risposta “una cara” ma una piccola modifica

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

    funziona cross browser, basta regolare il padding e il margine

    Modifica per nidificato: aggiungi questo stile per aggiungere un margine sinistro alla lista secondaria

    ul ul {margin-left: 15px; }

    Trovo che la risposta accettata sia un po ‘fudge, ma devo anche spingermi con i comandi extra di padding e css.

    Non aggiungo mai il padding per elencare gli oggetti personalmente, normalmente controllando la loro altezza della linea e il margine occasionale è sufficiente.

    Quando ho un problema di allineamento con le immagini in stile elenco personalizzato, aggiungo solo un pixel o due di spazio extra attorno a qualunque lato sia necessario per regolare la sua posizione rispetto a ciascuna riga di elenco.

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