C'è un modo per regolare la posizione dell'immagine in stile elenco?
Quando utilizzo il riempimento per gli elementi dell'elenco, l'immagine rimarrà nella sua posizione e non si sposterà con il riempimento ...
C'è un modo per regolare la posizione dell'immagine in stile elenco?
Quando utilizzo il riempimento per gli elementi dell'elenco, l'immagine rimarrà nella sua posizione e non si sposterà con il riempimento ...
Risposte:
Non proprio. Il tuo riempimento è (probabilmente) applicato all'elemento dell'elenco, quindi influirà solo sul contenuto effettivo all'interno dell'elemento dell'elenco.
L'uso di una combinazione di stili di sfondo e di riempimento può creare qualcosa di simile 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;
}Potresti voler aggiungere uno stile al contenitore dell'elenco padre (ul) per posizionare gli elementi dell'elenco puntato, questo articolo A Elenco a parte ha un buon riferimento iniziale.
topvalore ha funzionato per me anziché per l'imbottitura superiore. background: url(images/bullet.gif) no-repeat left 8px;
Di solito nascondo il tipo di elenco 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;
}"7px 7px" è ciò che allinea l'immagine di sfondo all'interno dell'elemento ed è anche relativa all'imbottitura.
Una possibile 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 puoi usare la parte superiore / sinistra di li: before per posizionare il nuovo proiettile. Si noti che la larghezza e l'altezza di li: prima devono avere le stesse dimensioni dell'immagine di sfondo scelta. Funziona con Internet Explorer 8 e versioni successive.
Ho avuto lo stesso problema, ma non ho potuto usare l'opzione di sfondo (e non volevo usare più sfondi) quindi ho pensato a un'altra soluzione
questo è un esempio per un menu che ha un indicatore quadrato come per la voce di menu attiva / 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 classe ": 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 una maggiore altezza delle linee:
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
La soluzione per cui ho optato per alla fine è stata quella di modificare l'immagine stessa per aggiungere spazio.
L'uso di un'immagine di sfondo su Li, come alcuni suggeriscono, funziona in molti casi, ma fallisce quando l'elenco viene usato insieme a un'immagine fluttuante (ad esempio per far avvolgere il testo attorno all'immagine).
Spero che questo ti aiuti.
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;
}Utilizzare (0 3px) per posizionare l'immagine dell'elenco.
Funziona in IE8 +, Chrome, Firefox e Opera.
Uso questa opzione perché puoi cambiare facilmente lo stile dell'elenco e avere buone probabilità che tu non debba nemmeno usare un'immagine. (violino sotto)
http://jsfiddle.net/flashminddesign/cYAzV/1/
AGGIORNARE:
Questo spiegherà il testo / contenuto che va 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 punto elenco e il contenuto.
Oppure puoi usare
list-style-position: inside;Penso che ciò che vuoi davvero fare sia aggiungere il padding (che stai aggiungendo al <li>) al tag <ul> e quindi i punti elenco si sposteranno con il testo del <li>.
C'è anche la posizione in stile elenco che potresti esaminare. Influisce sul modo in cui le linee avvolgono le immagini dei proiettili.
come la risposta "un darren" ma modifiche minori
li
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}funziona su più browser, basta regolare il riempimento e il margine
Modifica per nidificato: aggiungi questo stile per aggiungere margine sinistro all'elenco sotto-nidificato
ul ul {margine sinistro: 15px; }
Sto usando qualcosa del genere, sembra abbastanza pulito e semplice per me:
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;
}Il codice sopra funziona come nella maggior parte dei miei casi.
Per una regolazione esatta è possibile modificare vertical-align, ad esempio:
vertical-align: top;
/* or */
vertical-align: -10px;
/* or whatever you need instead of "middle" */È possibile impostare list-style: nonesul liposto di ul, se si preferisce.
Trovo che la risposta accettata sia un po 'confusa, troppo deve spingere con ulteriori comandi padding e css.
Non aggiungo mai il riempimento per elencare gli elementi personalmente, controllando normalmente 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 uno o due pixel di spazio extra attorno a qualsiasi lato sia necessario per regolare la sua posizione rispetto a ciascuna riga dell'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;}Nascondi l'immagine proiettile predefinita e utilizzala in background-imagequanto hai un controllo molto maggiore come:
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>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;
}
}
}
list-style-imagese non può essere posizionato? Di conseguenza, la maggior parte delle persone utilizza soluzioni alternative come::beforeebackground-imageinvece.