Hai mai desiderato indentare la seconda riga di un elemento di elenco invece che apparire direttamente sotto il punto elenco? Questo è probabilmente il motivo per cui sei qui e di seguito è probabilmente il risultato che stai cercando:
Oggi ci accingiamo a mostrarvi un modo semplice per farlo.
Il motivo per cui ciò sta accadendo è che il segno di spunta è contenuto in linea, quindi quando il testo viene avvolto continuerà a scorrere come al solito.
Puoi interrompere questo comportamento sfruttando text-indent:
La proprietà text-indent specifica quanto spazio orizzontale deve essere lasciato prima dell’inizio della prima riga del contenuto di testo di un elemento.
Fornendo un rientro di testo negativo si può dire alla prima riga di spostare una quantità desiderata a sinistra. Se si specifica quindi un padding-left positivo, è possibile annullare questo offset.
Nel seguente esempio un valore di 20px:-
ul { list-style: none; width: 200px; text-indent: -20px; /* key property */ margin-left: 20px; /* key property */ }li { margin-bottom: 10px; }E il gioco è fatto, ecco un CodePen di quanto sopra in azione.