Menu horizontal CSS - à égale distance?

Question

J'ai un menu CSS standard, composé de balises UL et LI. J'ai besoin d'eux pour pouvoir couvrir toute la page, horizontalement (ce n'est pas mon cas réel, mais je vais prendre cela pour simplifier la situation). Cependant, les éléments sont créés dynamiquement et je ne suis donc pas en mesure de coder en dur les éléments avec LI, ni les marges.

J'ai déjà vu des solutions utilisant JavaScript pour définir ces valeurs, mais j'aimerais vraiment les éviter.

Enfin, j’ai vu une très bonne solution qui consiste à installer

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

Ceci créera le comportement souhaité dans la plupart des navigateurs ... sauf pour IE.

Des idées?

EDIT: Merci pour les réponses. Cependant, comme le code qui génère les éléments n'est pas le mien, je ne peux pas définir de styles en ligne lors de leur création sans utiliser JavaScript ultérieurement.

Answer 1

Vous ne pouvez pas définir la hauteur ou la largeur d'un élément en ligne. http://www.w3.org/TR/CSS2/visudet.html # largeur_ligne

Essayez display:inline-block;

voici le correctif pour ie:

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

Answer 2

Si vous souhaitez que l'élément obtienne la totalité de l'espace disponible, il n'est pas nécessaire de définir à priori la largeur des éléments de menu (bien entendu, cela vous aidera à dimensionner les éléments li de manière égale. ) Vous pouvez résoudre ce problème en travaillant sur la display propriété.

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

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

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

Notez que width:1% est requis pour éviter la réduction des cellules.

Answer 3

Si vos éléments de menu sont générés de manière dynamique (vous ne savez donc pas combien il y en aura auparavant), vous pouvez ajouter un attribut style="width:xx" à li s (ou à <style> en haut). .. ou où vous voulez, vraiment). Où xx devrait soit par width_of_parent_div_in_px/number_of_elements+'px', soit par 100/number_of_elements+'%'. Les block s doivent également être des éléments de niveau float et 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 largeur: 18% peut être à peu près correcte si vous avez 5 éléments transversaux, ce qui représente la bordure et le remplissage. Mais cela variera en fonction du nombre d'éléments que vous avez, de la quantité de remplissage, etc.

Answer 5

Si vous êtes ouvert à l’utilisation de Flexbox, ce n’est pas difficile à faire. Le code complet que je suis sur le point de publier va à astuces CSS . comme c'est leur CSS.

Vous trouverez ci-dessous un exemple incluant les préfixes de fournisseur.

#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>

Le seul problème avec Flexbox est de savoir si vous devez prendre en charge IE 9 et les versions antérieures, sinon, je ne vois aucune raison de ne pas utiliser Flexbox. Vous pouvez afficher la prise en charge du navigateur pour Flexbox ici .

Answer 6

Voici ce qui a fonctionné pour moi:

#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;
}