Conversion marge de pixel en pourcentage - breaks flotter élément gauche

Question

je le bloc HTML suivant:

<div class="container clearfix"> 
    <div class="grid_8 omega"> 
    <ul class="nav"> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Cupcakes &amp; Prices</a></li> 
     <li><a href="#">Locations</a></li> 
     <li class="last"><a href="#">Contact Us</a></li> 
    </ul> 
</div> 

Ce qui est de style de cette façon:

ul.nav { 
    margin-top: 18.18%; 
    list-style: none; 
    float: right; 
} 

ul.nav li { 
    float: left; 
    margin-right: 40px; 
} 

Et cela me donne la résultat suivant (les contours de la barre d'outils du développeur Web sont activés):

Maintenant j'essaye de changer la marge de 40px en pourcentage afin de rendre le site plus fluide et j'ai appris que je devrais utiliser le résultat cible/contexte = qui dans ce cas est 40px/660px = 0.06 qui est approximativement 6%. Je change alors le 40px à 6% et j'obtiens ce qui suit à la place:

Qu'ai-je fait de mal ici? La largeur du bloc ul a diminué et la marge droite ne change pas lorsque je redimensionne la fenêtre du navigateur. Il semble que peu importe la quantité de pourcentage que je mets dedans, il n'y a aucune valeur en pourcentage qui rend ce travail du tout. Je dois utiliser des pourcentages erronés? Pourquoi ça ne marche pas?

Answer 1

Je ne sais pas quelle est la hauteur ... donc il ne sait pas ce que 18,8% est. Vous devez d'abord déclarer le html et le body 100% height. et toutes choses à l'intérieur ... c'est difficile. comme @Mr_Green dit ... c'est basé sur la largeur parce que c'est fou !!! aussi ... 18.8 os un nombre whack. (Même avec la ul ... 6,3498% de ce que ...?)

Answer 2

Ok, j'ai tout compris grâce au commentaire de @AliBassam

Comme il le dit, le pourcentage de la marge droite est liée à l'élément parent ul au lieu de div. La largeur du bloc ul est liée à la marge de l'élément li, mais si cette marge est un pourcentage de la largeur ul, les deux éléments dépendent l'un de l'autre et cela n'a aucun sens.

Pour résoudre ce problème, vous devez définir une largeur de ul.nav:

ul.nav { 
    width: 83%; 
    margin-top: 18.18%; 
    list-style: none; 
    float: right; 
} 

C'est de 83% de 600px qui est dans le div contenant le ul.nav qui se traduit par environ 500px