Menu orizzontale CSS - equidistante?

Question

Ho un menu CSS standard, realizzato con tag UL e LI. Ho bisogno che riescano a coprire l'intera pagina in orizzontale (non nel mio caso reale, ma lo prenderò per semplificare la situazione). Tuttavia, gli articoli vengono creati dinamicamente e quindi non sono in grado di codificare nessuno con gli articoli LI, né i margini.

Ho visto soluzioni che utilizzano JavaScript per impostare quei valori, ma mi piacerebbe davvero evitarli.

Infine, ho visto una soluzione abbastanza buona che si sta configurando

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

Questo creerà il comportamento desiderato nella maggior parte dei browser ... tranne IE.

Qualche idea?

MODIFICA: grazie per le risposte. Tuttavia, poiché il codice che genera gli articoli non è mio, non sono in grado di impostare stili incorporati quando li creo senza utilizzare JavaScript in seguito.

Answer 1

Non puoi impostare l'altezza o la larghezza di un elemento in linea. http://www.w3.org/TR/CSS2/visudet.html # inline-width

Prova display:inline-block;

ecco la soluzione per ie:

display:inline-block;
zoom:1;
*display:inline;

Answer 2

Se vuoi lasciare che l'elemento ottenga l'intero spazio disponibile, non è necessario definire a priori la larghezza degli elementi del menu (ovviamente, aiuterà a dimensionare equamente gli elementi li ). Puoi risolvere questo problema lavorando sulla proprietà display.

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

Nota che width:1% è richiesto per evitare il collasso delle celle.

Answer 3

Se le voci di menu vengono generate in modo dinamico (quindi non sai quante ce ne saranno prima), puoi aggiungere un attributo style="width:xx" a li s (o in <style> in alto. .. o dove mai per favore, davvero). Dove xx dovrebbe essere width_of_parent_div_in_px/number_of_elements+'px' o 100/number_of_elements+'%'. Gli block s dovrebbero anche essere float - elementi di livello e left ed <=>.

Answer 4

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

La larghezza: il 18% potrebbe essere giusto se hai 5 elementi attraverso, tenendo conto del bordo e del riempimento. Ma varierà a seconda di quanti elementi hai, di quanto imbottitura, ecc.

Answer 5

Se sei aperto all'utilizzo di Flexbox, non è difficile farlo. Il credito completo per il codice che sto per pubblicare va a Trucchi CSS poiché questo è il loro CSS.

Di seguito è riportato un esempio che include i prefissi del fornitore.

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

L'unico problema con Flexbox è se è necessario supportare IE 9 e versioni precedenti, altrimenti non vedo alcun motivo per non utilizzare Flexbox. Puoi visualizzare il supporto del browser per Flexbox qui .

Answer 6

Ecco cosa ha funzionato per me:

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}