Boutons de navigation justifiés

Question

J'essaye de créer le menu de navigation principal pour un site Web qui aura une quantité variable d'éléments de menu primaires. La barre de navigation est horizontale et a une largeur de 738px. Je voudrais avoir l'élément le plus à gauche 18px de la gauche et l'élément le plus à droite 18px du bord droit de l'élément, avec les autres éléments de menu répartis également entre eux. J'utilise une mise en page sans tableau.

Jusqu'à présent, je n'ai pas réussi à le faire fonctionner exactement comme je le veux. Réglage margin: auto ne semble pas aider, et je ne peux pas garder la marge 18px des deux côtés en utilisant une table. Une idée était d'utiliser text-align: justify mais cela ne justifie pas les lignes simples.

Existe-t-il un moyen simple ou moins simple de le faire, ou vais-je devoir demander à l'AD de détendre ses exigences visuelles?

Answer 1

En supposant:

<div id="nav"> 
    <div id="inner"> 
    <div>item one</div> 
    <div>item two</div> 
    <div>item three</div> 
    <div>item four</div> 
    </div> 
</div> 

utilisation:

#inner { margin: 0 18px; overflow: auto; } 
#inner div { width: 25%; float: left; } 

Cela a deux limites:

1. Il étend chaque élément à la largeur disponible plutôt que la largeur requise. Si vous voulez la largeur requise, vous pouvez utiliser les div divisés en tant que conteneurs pour le contenu qui ne s'étire pas; et

2. Vous devez connaître le nombre d'enfants à l'avance.

Answer 2

Le code HTML à l'aide d'une liste non numérotée

<ul class="NavBar"> 
<li><a href="#" class="First">Item</a></li> 
<li><a href="#">Item</a></li> 
<li><a href="#">Item</a></li> 
<li><a href="#">Item</a></li> 
<li><a href="#" class="Last">Item</a></li> 
</ul> 

Et le CSS

.NavBar 
{ 
display:block; margin:auto; 
width:738px; 
}  
.NavBar li 
{ 
display:inline; 
text-align:justify; 
list-style:none; 
width:140px; 
} 

.Navbar .First 
{ 
margin-left:18px; 
} 

.Navbar .Last 
{ 
margin-right:18px; 
} 

Answer 3

Si le nombre d'éléments de menu est variable, je ne peux pas penser à une solution purement CSS. Vous pouvez utiliser Javascript pour calculer la largeur de chaque élément en fonction du nombre et de la modification dynamique du CSS (ceci peut être fait très facilement avec une bibliothèque DOM/Javascript comme jQuery), avec un Javascript désactivé disposition.

Answer 4

Si je comprends votre problème, qui peut vous aider un peu:

html:

<ul class="lnkList"> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
    <li><a href="#">Item</a></li> 
</ul> 

css:

ul.lnkList{display:block; float:left; margin:auto; width:708px; 
     height:20px; padding:0px 15px;} 

ul.lnkList li{list-style:none; display:block; float:left; 
     width:111px; margin:0px 3px;} 

ul.lnkList li a{display:block; float:left; width:111px;} 

est juste un échantillon de ce que vous pouvez faire si vous avez 6 blocs. C'est justifié.