comment répartir uniformément les éléments dans un div uns à côté des autres?

Question

Cela est destiné à un menu.
Par exemple, j'ai un élément div avec 3 travées en elle, qui présentent tous une certaine marge, max-width et float (gauche ou droite).
Il est positionné à partir de la gauche et qui va comme ceci:
[[span1][span2][span3] - lots of free space here].
Je veux le rendre encore comme ceci:
[[span1] - space - [span2] - space - [span3]]
Comment puis-je faire cela à l'aide de CSS? J'ai un peu de doute, il n'est pas possible.
Notez que je veux garder le même style quand je ajouter ou supprimer un élément de menu.
HTML:

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS:

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

Answer 1

Dans les "vieux jours", vous pourriez utiliser une table et des éléments de menu serait uniformément espacés, sans avoir à indiquer de manière explicite la largeur pour le nombre d'éléments.

Si ce n'était pas pour IE 6 et 7 (si c'est un sujet de préoccupation, alors vous pouvez faire la même chose dans le CSS.

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS:

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

Sans avoir à ajuster le nombre d'éléments.

Exemple sans table-layout:fixed - les cellules sont réparties uniformément sur toute la largeur, mais ils ne sont pas nécessairement de même taille depuis leur largeur est déterminée par leur contenu.

• http://jsfiddle.net/w3dx/ULQwf/

Exemple avec table-layout:fixed - les cellules sont de taille égale, indépendamment de leur contenu. (Merci à @DavidHerse dans les commentaires pour cet ajout.)

• http://jsfiddle.net/kqHWM/

Si vous voulez le premier et le dernier éléments de menu à gauche et justifié à droite, puis vous pouvez ajouter le code CSS suivant:

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}

Answer 2

Vous pouvez utiliser justifier.

Ceci est similaire pour les autres réponses, sauf que la gauche et le plus à droite les éléments seront sur les bords, au lieu d'être équidistants - [a...b...c au lieu de .a..b..c.]

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

Une chasse aux sorcières, c'est que vous devez laisser un espace entre chaque élément. [Voir la tripoter.]

Il y a deux raisons pour définir les éléments de menu à inline-block:

1. Si l'élément est, par défaut, un élément de niveau bloc (comme un <li>), l'affichage doit être mis à inline ou inline-block pour rester dans la même ligne.
2. Si l'élément a plus d'un mot (<span>click here</span>), chaque mot sera distribué uniformément lorsque la valeur inline, mais seulement les éléments seront distribués lorsque la valeur inline-block.

Voir le JSFiddle

EDIT:
Maintenant que flexbox a un large soutien (tous les non-IE et IE 10+), il ya une "meilleure façon".
En supposant que le même élément de la structure ci-dessus, vous aurez besoin de:

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

Si vous souhaitez que les éléments externes à être espacés ainsi, il suffit de passer en l'espace entre l'espace autour.
Voir le JSFiddle

Answer 3

C'est un moyen facile et rapide de le faire

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

css

div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

Ajustez ensuite l' width de la spans pour le numéro que vous avez.

Exemple: http://jsfiddle.net/jasongennaro/wvJxD/