Come costruire elenchi orizzontali per la programmazione HTML5 e CSS3 - dummies

A volte, vuoi barre dei pulsanti orizzontali. Poiché gli elenchi HTML5 tendono ad essere verticali, potresti essere tentato di pensare che una lista orizzontale sia impossibile. Infatti, CSS3 fornisce tutto il necessario per convertire esattamente lo stesso HTML in un elenco orizzontale.

Non è necessario mostrare di nuovo l'HTML perché non è cambiato affatto. (Non è CSS grande?) Anche il CSS non è cambiato molto:

#menu ul {margin-left: -2. 5em;} #menu li {list-style-type: none; larghezza: 7em; allineamento del testo: centro; float: left;} #menu a {text-decoration: none; colore nero; blocco di visualizzazione; background-color: #EEEEFF; box-shadow: 5px 5px 5px grigio; margin-bottom: 2px; margin-right: 2px; border-radius: 5px; border: 3px outset #EEEEFF;} #menu a: hover {background-color: #DDDDEE; box-shadow: 3px 3px 3px grey; border: none;}

Le modifiche sono incredibilmente semplici:

1. Fai fluttuare ciascun elemento dell'elenco dando a ogni li un float: valore di sinistra:

   #menu li {list-style-type: none; fluttuare: a sinistra; larghezza: 5em; text-align: center;}
   

2. Sposta il margine sinistro dell'intero ul prendendo la formattazione margin-left dagli elementi li e trasferendola in ul:

   #menu ul {margin-left: -2. 5em;}
   

3. Aggiungi un margine destro.

   Ora che la barra dei pulsanti è orizzontale, aggiungi un piccolo spazio a destra di ciascun pulsante in modo che non risultino così affollati:

   margin-right: 2px;