Come si imposta lo spazio verticale tra gli elementi dell'elenco?

115

All'interno di un <ul>elemento, chiaramente la spaziatura verticale tra le righe può essere formattata con l'attributo line-height.

La mia domanda è, all'interno di un <ul>elemento, come imposto la spaziatura verticale tra gli elementi dell'elenco?

html css html-lists

— Brice Coustillas
fonte

1

ul li { margin: ???; padding: ???; line-height: ???; }tutti o alcuni di questi attributi CSS.

— Brad Christie

112

Puoi usare margin. Guarda l'esempio:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

in particolare, usa il margine sugli lielementi non ulsull'elemento.

— duanev

41

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

EDIT: Se non usi il caso speciale per l'ultimo elemento li, la tua lista avrà una piccola spaziatura in seguito che puoi vedere qui: http://jsfiddle.net/wQYw7/

Ora confrontalo con la mia soluzione: http://jsfiddle.net/wQYw7/1/

Sicuramente questo non funziona nei browser meno recenti, ma puoi facilmente utilizzare le estensioni js che lo abiliteranno per i browser meno recenti.

1

@Layne parte del nostro lavoro come sviluppatori / programmatori web è fornire soluzioni che funzionino nel maggior numero di ambienti possibile. La tua risposta è davvero eccessiva per la domanda posta.

— disinfor l'

1

Non credo proprio. Fornisci solo una soluzione per l'ambiente che desideri raggiungere, tutto il resto sarebbe eccessivo a meno che tu non preveda di espandersi. Inoltre, tutte le risposte hanno lo svantaggio di aggiungere spazio prima e / o dopo il primo / ultimo elemento della lista. Che non era il problema, voleva avere solo una spaziatura TRA gli elementi della lista (almeno l'ha scritta). L'ultimo elemento nelle altre risposte avrà una spaziatura in seguito sebbene non ci siano elementi li seguenti.

L'ambiente con cui lavora sono i browser web. Non è eccessivo suggerire una soluzione che funzioni ovunque. Inoltre, se sei davvero preoccupato per il margine dell'ultimo elemento, non suggeriresti una soluzione che richiederebbe js per essere risolta. Si potrebbe utilizzare :first-childe che avrebbe funzionato in ogni cosa IE7 +

— disinfor

4

@disinfor Non sono d'accordo sul targeting di tutto. Parte dello stress dello sviluppo web deriva dal supporto di browser che non ci supportano. Safari è uno di questi. Dobbiamo resistere ai browser che frenano Internet, medium.com/@richtr/… . Le nostre pagine web dovrebbero riportare gli avvisi "Non supportiamo il tuo browser" per non farlo funzionare ovunque. E dobbiamo anche informare e tenere testa ai clienti. Oppure non possiamo fare nulla ed essere fantastici tappetini.

— 1,21 gigawatt

@ 1.21gigawatts "Le nostre pagine web dovrebbero riportare il messaggio" Non supportiamo il tuo browser "" mhm, no. Questo si chiama sabotaggio della concorrenza ed è illegale in più paesi. Microsoft lo ha fatto con Skype per il Web. Skype per Web funziona ancora perfettamente con altri browser. Google ha fatto funzionare male Youtube in Safari per più di un anno. Google impedisce agli utenti Tor di utilizzare determinati servizi. Non ha lo scopo della "piattaforma web" di rendere app e servizi indipendenti dalla piattaforma, come non bloccare piattaforme specifiche? Se vuoi farlo, perché non creare invece programmi nativi? Alla fine, sono più potenti.

— Andreas

35

Sarei propenso a questo che ha la virtù del supporto IE8.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

— Paulie_D
fonte

27

Aggiungi una marginai tuoi litag. Ciò creerà uno spazio tra lie che puoi utilizzare line-heightper impostare la spaziatura del testo all'interno dei litag.

— disinfor
fonte

3

Molte volte quando si producono esplosioni di e-mail HTML non è possibile utilizzare fogli di stile o blocchi di stile / stile. Tutti i CSS devono essere in linea. Nel caso in cui desideri regolare la spaziatura tra i proiettili, utilizzo li style = "margin-bottom: 8px;" in ogni punto elenco. Personalizza il valore dei pixel a tuo piacimento.

— Malcolm Stone
fonte

Inoltre, i tag style / style type sono deprecati

— Ben Slade,

2

Per applicare a un intero elenco, utilizzare

ul.space_list li { margin-bottom: 1em; }

Quindi, nell'html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

— Tom Bartenstein
fonte

0

l'impostazione del padding-bottom per ogni elenco utilizzando la pseudo classe è un metodo praticabile. Può essere utilizzata anche l'altezza della linea. Ricorda che le proprietà dei caratteri come la famiglia dei caratteri, lo spessore dei caratteri, ecc. Giocano un ruolo per le altezze irregolari.

— Rishi jung
fonte

2

Potete fornire un esempio della vostra soluzione?

— Muldec

-9

<br>tra le <li></li>voci di riga sembra funzionare perfettamente in tutti i browser Web che ho provato, ma non riesce a superare il controllo CSS3 W3C in linea. Mi dà esattamente l'interlinea che sto cercando. Per quanto mi riguarda, dal momento che indubbiamente funziona, continuo a usarlo, qualunque cosa dica W3C, finché qualcuno non riesce a trovare una buona alternativa legale.

— Melvyn Owen
fonte

Il tuo suggerimento funziona bene se sei soddisfatto dell'altezza della linea corrente, ma penso che voglia specificare la sua quantità di spazio. Utilizzando le interruzioni di riga è sufficiente creare nuove righe utilizzando l'altezza della riga corrente.

— 1,21 gigawatt

Se iterate su un elenco con molti elementi, aggiungere br è una pratica terribile. Il markup è il modo più sicuro e sicuro per aggiungere spazio come suggerito dalle risposte precedenti.

— SeaWarrior404