Égaliser l'espace en utilisant les pourcentages

Question

Existe-t-il un moyen de répartir uniformément les éléments? Je travaille sur un design reponsif et je veux distribuer uniformément li dans un menu.

HTML

<div id="navigation"> 
    <ul> 
     <li><a href="shop.html">Shop</a></li> 
     <li><a href="/blog">Blog</a></li> 
     <li><a href="about.html">About</a></li> 
     <li>|</li> 
     <li><a href="freebies.html">Freebies</a></li> 
     <li><a href="lookbook.html">LookBook</a></li> 
     <li><a href="gift-finder.html">Gift Finder</a></li> 
    </ul> 
</div> 

CSS:

navigation ul {

margin: 0; remplissage: 0;

}

navigation li {

display:inline-block; 
font-size:30px; 
font-family: 'delicious_smallcapsregular'; 

}

navigation {

largeur: 100%; }

navigation li a {

color:#737373; 
text-decoration: none; 

}

Answer 1

Essayez d'utiliser la marge en% de comme celui-ci;

#navigation li{ 
display:inline-block; 
font-size:1.8em; 
margin:0 2%; 
font-family: 'delicious_smallcapsregular'; 
list-style-type: none; 
} 

Et non seulement la marge, mais aussi garder en réduisant font-size et padding pour obtenir plus réactif et également distribués pour chaque appareil.