La seconda riga in li inizia sotto il punto elenco dopo il ripristino dei CSS

Question

Sto riscontrando alcuni problemi con il mio elenco ul dopo l'utilizzo dell'applicazione CSS-reset.

Quando il testo nello li è lungo e si interrompe su una seconda riga, il testo inizia sotto il punto. Mi piacerebbe iniziare con lo stesso margine/riempimento del testo sul lato destro del proiettile.

Una sorta di difficile da spiegare, ma se si guarda l'immagine di esempio. L'immagine a sinistra è l'elenco di oggi. "motta varsel [...]" inizia sotto il proiettile, ma mi piacerebbe che guardasse l'immagine sulla destra.

Come posso farlo con i CSS? Presumo che ci sia qualcosa di molto semplice che ho trascurato, ma non riesco a capire cosa. Le ricerche di Google non hanno restituito nulla di utile.

Answer 1

Il tag li ha una proprietà chiamata list-style-position. Questo rende i tuoi proiettili all'interno o all'esterno della lista. Di default, è impostato su inside. Ciò rende il tuo testo avvolgente. Se lo si imposta su outside, il testo dei tag li verrà allineato.

Lo svantaggio di questo è che i tuoi proiettili non saranno allineati con il testo all'esterno dello ul. Se vuoi allinearlo con l'altro testo puoi usare un margine.

ul li { 
    /* 
    * We want the bullets outside of the list, 
    * so the text is aligned. Now the actual bullet 
    * is outside of the list’s container 
    */ 
    list-style-position: outside; 

    /* 
    * Because the bullet is outside of the list’s 
    * container, indent the list entirely 
    */ 
    margin-left: 1em; 
} 

---

Modifica 15 marzo 2014 Vedendo le persone continuano ad arrivare da parte di Google, mi sentivo come la risposta originale potrebbe utilizzare qualche miglioramento

• Cambiato il blocco di codice per fornire solo la soluzione
• Modificata l'unità di indentazione su em
• Ogni proprietà è applicato all'elemento ul
• Buone commenti :)

Answer 2

Ecco un buon example -

ul li{ 
    list-style-type: disc; 
    list-style-position: inside; 
    padding: 10px 0 10px 20px; 
    text-indent: -1em; 
} 

demo funzionante: http://jsfiddle.net/d9VNk/

Answer 3

mi seconda risposta Dipaks', ma spesso solo il testo-trattino è sufficiente, come si può/maynot essere il posizionamento della ul per il layout migliore controllo.

ul li{ 
text-indent: -1em; 
}