comment faire un ul li css menu avec la variable d'espace entre les éléments

L'idée est de faire un menu avec un montant fixe d'éléments. Chacun des éléments doit avoir un padding fixe sur eux pour leur donner un aspect décent au moment de placer une bordure autour d'eux. (jusqu'ici tout va bien)
Mais ces éléments doivent être réparties dans un div de taille fixe, espacés uniformément les éléments eux-mêmes ne seront pas de la même taille que cela dépend du texte à l'intérieur de ces éléments.

Ce que je n'arrive pas à comprendre est comment s'assurer que les éléments sont sur 1 ligne avec une dynamique (plus ou moins) espacer uniformément entre eux dans une div (dans mon cas 1000px). Le premier élément devrait être doublée pour le bord gauche de la div. Le dernier point doit être doublée pour le bord droit de la div.

Ci-dessous est ce que j'ai jusqu'à présent. Cela met déjà le remplissage et de bordure sur elle, mais je ne peux pas définir un margin: 0 auto sur elle, bien que je le peux, mais il ne fait rien. Le principal problème est que l'espacement entre les deux doit être dynamique, parce que les éléments ont tendance à sauter sur le zoom du navigateur qui bousille l'alignement de l'extérieur, les éléments et les rend même certains éléments de saut à la ligne suivante. C'est pourquoi (zoom mess des choses - en particulier avec des largeurs fixes) je suis réticent à mettre une largeur réelle sur chacun des éléments (je sais que j'ai besoin d'une largeur à utiliser margin: 0 auto correctement, mais même quand je fais de l'utilisation d'une largeur, il ne semble pas faire ce que je veux faire).

<div id="navigation">
    <ul>
        <li class="menu-1"><a href="" >Home</a></li>
        <li class="menu-2"><a href="" class="">Nieuws</a></li>
        <li class="menu-3"><a href="" class="">Producten</a></li>
        <li class="menu-4"><a href="" class="">Algemene informatie</a></li>
        <li class="menu-5"><a href="" class="">Promoties</a></li>
        <li class="menu-6"><a href="" class="">Algemene voorwaarden</a></li>
        <li class="menu-7"><a href="" class="">Contact</a></li>
    </ul>
</div>

#navigation ul {
    margin:0px;
    padding:0px;
    list-style:none;
    width:1000px;   
    display:block;
}

#navigation li {
    float: left;
    display:inline;
}

#navigation li a {
    padding:10px 15px 10px 15px;
    float:right;

    display: block;
    border: 0.1em solid #dcdce9;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

#navigation{
    width:100%;
}
La flexbox modèle va résoudre cela, finalement.

OriginalL'auteur 3xil3 | 2012-05-24

  1. 2

    Le plus simple serait d'utiliser un tableau au lieu de li éléments : vous pouvez définir la largeur de la table et la largeur des cellules est automatiquement calculé.

    Vous pouvez choisir de leur donner la largeur en % avoir de l'égalité ou de décider de les laisser proportionnellement adapté.

    Ne faut pas avoir peur de tables : parfois ils font le travail plus simple.

    Selon les spécifications d'origine, vous aurez besoin de menu alternatif cellules (qui doivent shrink wrap) avec des cellules vides (qui ont besoin de battre les uns contre les autres pour le reste de l'espace).
    ou de jouer avec bordure et la marge, ou s'étend à l'intérieur des cellules, dépend de l'effet final recherché. Mais bien sûr, complémentaire des cellules peut être utile.
    J'ai toujours considéré l'utilisation de tableaux pour les table besoins comme une mauvaise pratique, mais il est utile de considérer, puisque aucune autre solution n'est parvenue à ce que j'ai besoin d'encore
    C'était une exagération : le problème surtout s'affiche lorsque vous utilisez des tableaux pour l'ordinaire de mise en page (beaucoup de gens ont été lents à la transition en css). Mais si vous êtes prudent, il n'est pas nécessaire pour éviter l'outil, qui est le meilleur pour le problème dans un cas précis.

    OriginalL'auteur Denys Séguret

  2. 1

    À l'aide du tableau des modes d'affichage: http://jsfiddle.net/pnUdp/1/

    #navigation {
    margin:0px;
    padding:0px;
    display:table;
    width:1000px;
    border-collapse: collapse;
}

#navigation ul{
    margin:0px;
    padding:0px;
    list-style:none;
    display:table-row-group;
}

#navigation li{
    display:table-cell;
    border: 0.1em solid #dcdce9;
    vertical-align: middle;
}

#navigation li a{
    padding:10px 15px 10px 15px;
    display:block;
    color: #6d6f71;
    text-decoration: none;
    text-align: center; 
    font-size:18px;
    font-weight:bold;
}

    Je ne suis pas sûr de la façon de la croix-navigateur, c'est bien...

    Comment puis-je obtenir l'espacement de manière égale entre les éléments de façon dynamique? Ce code met les articles en une seule ligne, sans espace entre les éléments. J'ai obtenu le même effet avec un float:left version du menu, mais je ne pouvais pas comprendre comment faire pour obtenir l'espacement automatique entre les éléments
    J'ai modifié le css pour permettre l'espacement entre les éléments: jsfiddle.net/pnUdp/7 - soyez averti, cependant, que si le texte des pauses de 2 lignes, les choses deviennent étranges.

    OriginalL'auteur Rob Lowe