Come posso creare un menu orizzontale con ogni object uguale larghezza e spaziatura tra loro?

Ecco cosa ho ottenuto finora: violino

2 problemi con esso però:

  1. Ho hard-coded la larghezza di ogni li al 33% , che preferirei non fare in modo che io possa facilmente aggiungere più elementi.
  2. Voglio mettere un po ‘di spaziatura tra ogni object (una lacuna nel colore di sfondo), ma non appena aggiungo un margine, un object sarà scagliato lungo una linea. Come faccio ad aggirarlo?
 #main-nav { list-style: none; margin: 0; padding: 0; width: 100%; overflow: auto; } #main-nav li { float: left; width: 33%; height: 25px; text-align: center; } #main-nav li a { width: 100%; display: block; height: 100%; line-height: 25px; text-decoration: none; background-color: #e0e0f0; font-weight: bold; color: #021020; } #main-nav li a:hover { background-color: #498cd5; color: #ddeeee; } 
  

Vedi: http://jsfiddle.net/f6qmm/

display: table viene utilizzata per spaziare in modo uniforms un numero dinamico di immagini. Sfortunatamente, ciò non funziona in IE7, quindi *float: left è usato (solo per IE7 e inferiore) in modo che almeno siano tutti su una sola riga – anche se sembra ancora orrendo.

padding-left: 5px viene applicato a ogni li , quindi li:first-child { padding-left: 0 } rimuove solo per il primo li .

 #main-nav { list-style: none; margin: 0; padding: 0; width: 100%; display: table; table-layout: fixed; overflow: hidden } #main-nav li { display: table-cell; *float: left; /* improve IE7 */ height: 25px; text-align: center; padding-left: 5px } #main-nav li:first-child { padding-left: 0 } #main-nav li a { width: 100%; display: block; height: 100%; line-height: 25px; text-decoration: none; background-color: #e0e0f0; font-weight: bold; color: #021020; } #main-nav li a:hover { background-color: #498cd5; color: #ddeeee; } 
  

Prova questo violino: http://jsfiddle.net/Nk2Wy/1/ .

Questo approccio ti consente di aggiungere un numero arbitrario di elementi. Se non si adattano più alla linea, perché sono così tanti o perché la finestra del browser è piuttosto piccola, vengono mostrati su altre righe.

Se si aggiunge una width: 50px a a stile, tutti gli elementi hanno la stessa larghezza. Al momento, la larghezza dipende dal testo reale.

Vedi la domanda (e le risposte) Come liberarsi dello spazio bianco tra gli elementi della lista orizzontale css? anche.

A causa di ciò, ho aggiornato il violino ancora una volta: http://jsfiddle.net/Nk2Wy/3/ .