Horizontal Menu ul aligner à droite et aligner à gauche

Question

J'ai parcouru tout et je n'arrive pas à trouver de solution exacte à ce problème. Cela semble assez simple mais je me suis cogné la tête contre un mur dernièrement en essayant de le faire juste. J'ai un menu horizontal simple sur un site Web. J'utilise un UL pour que tout fonctionne. Voici mon code:

> <div id="nav"> 
>   <ul> 
>     <li><a href="#">Home</a></li> 
>     <li><a href="#">company</a></li> 
>     <li><a href="#">Products</a></li> 
>     <li><a href="#">Services</a></li> 
>     <li><a href="#">Involvement</a></li> 
>     <li><a href="#">Blog</a></li> 
>     <li class="right"><a href="#">Contact Us</a></li> 
>    </ul> 
>   </div> <!-- End Nav --> 

Mon Css est la suivante:

#nav ul{ 
    width:980px; 
    margin:0; 
    padding:0; 
    border:1px solid red; 
} 
#nav ul li{ float:left;color:#FFF} 

#nav ul li a {display:block;padding:5px 62px 0 0px; text-decoration:none; color:#FFF} 
#nav ul li.right{float:right;margin-right: -30px; 
} 

Le problème que j'ai est que le dernier élément s'aligner à droite mais maintenant il y a un espace énorme entre la deuxième à la dernière onglet et le dernier onglet. C'est à cause du rembourrage à gauche que j'ai dans la partie. Je veux juste que le premier texte s'aligne à gauche et le dernier texte à aligner à droite et les autres entre les deux pour avoir un espace cohérent. Vous pouvez voir le problème ici: http: //jsfiddle.net/nathan1342/sPZG9/

Toute aide serait très appréciée !!

Merci!

Answer 1

vous ne devriez pas travailler ici avec différentes valeurs flottantes. utilisez plutôt float: à gauche pour tous les li et positionnez le premier et le dernier élément absolus. La boîte d'emballage #nav doit être positionnée de manière relative.

<style> 

#nav{ 
    position: relative; 
    width:980px; 
    margin:0; 
    padding:0; 
    height: 100px; 
    border:1px solid red; 
} 

#nav ul{ 
    display: block; 
    margin: 0px auto; 
    width: 600px; 
} 
#nav ul li {list-style: none} 
#nav ul li a{display:block; float: left; padding:5px 62px 0 0px; text-decoration:none; color:#000;} 


.left{ 
    position: absolute; 
    top: 0px; 
    left: 10px; 
    text-align: left; 
} 

.right{ 
    position: absolute; 
    top: 0px; 
    right: 10px; 
} 

.right a { padding-right: 0 !important;} 

</style> 

<div id="nav"> 
      <ul> 
       <li class="left"><a href="#">Home</a></li> 
       <li><a href="#">company</a></li> 
       <li><a href="#">Products</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Involvement</a></li> 
       <li><a href="#">Blog</a></li> 
       <li class="right"><a href="#">Contact Us</a></li> 
      </ul> 
</div> <!-- End Nav --> 

Answer 2

bien, ce n'est pas idéal, mais vous pouvez obtenir le résultat approximatif en utilisant comme votre css ...

#nav ul{ 
    width:980px; 
    margin:0; 
    padding:0; 
    border:1px solid red; 
} 
#nav ul li{ float:left;color:#fff;width:16%;} 

#nav ul li a {display:block;text-decoration:none; color:#FFF;} 
} 

qui vient de jouer au large du fait que, puisque nous savons que vous avez 6 éléments dans la liste, chaque élément devrait occuper environ 16% de l'espace.

Answer 3

Votre code ici et le code que vous avez fourni dans votre lien jsfiddle ont des différences, par exemple vous n'avez pas posté de balise #nav ici. Ajustez la largeur de votre barre de largeur, il n'y a pas de problème pour moi, ça rend bien avec le lien Contactez-nous étendu à l'extrémité et tout le reste à égale distance.

Answer 4

essayez ceci:

http://jsfiddle.net/Szv5x/

I utilisé display: inline-block, a changé le rembourrage, définissez une largeur pour faire le menu remplir la largeur que vous avez spécifié avec des éléments régulièrement espacés.

Answer 5

C'était très proche de la réparer. Je l'ai eu cependant avec une petite modification à votre code. Merci une tonne !!:

#nav{ 
    position: relative; 
    width:980px; 
    margin:0 auto; 
    padding:0; 
    height: 40px; 

} 

#nav ul{ 
    display: block; 
    margin: 0 0 0 -40px; 
    width: 980px; 
    font-size:20px; 
} 
#nav ul li {list-style: none} 
#nav ul li a{display:block; float: left; padding:5px 68px 0 0px; text-decoration:none; color:#fff;} 


.right{ 
    position: absolute; 
    top: 0px; 
    right: 10px; 
} 

.right a { padding-right: 0 !important;}