css horizontal navigation spacing

Question

J'essaie de créer une barre de navigation horizontale en CSS avec 5 liens espacés régulièrement. Le html si tout va rester comme ceci:

<div id="footer"> 
    <ul> 
     <li><a href="one.html">One</a></li> 
     <li><a href="two.html">Two</a></li> 
     <li><a href="three.html">Three</a></li> 
     <li><a href="four.html">Four</a></li> 
     <li><a href="five.html">Five</a></li> 
    </ul> 
</div> 

Donc, avec CSS, je veux espacer uniformément dans le div pied de page. Jusqu'à présent j'utilise ceci:

div#footer{ 
    height:1.5em; 
    background-color:green; 
    clear:both; 
    padding-top:.5em; 
    font-size:1.5em; 
    width:800px; 
} 
div#footer ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 
div#footer li{ 
    width:155px; 
    display:inline-block; 
    text-align:center; 
} 

Cela fonctionne plutôt bien, mais il y a un espacement entre les li que je ne veux pas. C'est pourquoi j'ai utilisé le 155px au lieu de 160px pour leur largeur, il y a environ 5px d'espace entre chaque li. D'où vient cet espacement? Comment puis-je m'en débarrasser? Si j'augmente la taille de la police, l'espacement augmente également.

Answer 1

J'ai eu ce arrivé à moi. Malheureusement, cela est dû au fait que le navigateur prend les sauts de ligne entre les éléments de la liste et les restitue comme des espaces. Pour corriger, modifier votre code HTML à:

<div id="footer"> 
    <ul> 
    <li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li> 
    </ul> 
</div> 

Answer 2

Si vous utilisez ceci:

div#footer li{ 
    width:160px; 
    display:block; 
    float: left; 
    text-align:center; 
} 

Tout semble beau: D

Answer 3

Les espaces entre vos <li> éléments sont dus aux retours et espaces blancs transport entre eux, en raison du style en ligne. Si vous écrivez:

<li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li> 

Vous ne verrez plus d'espace entre eux.

Je ne suis pas sûr que les blocs inline s'affichent bien sur IE6, donc vous pouvez essayer l'approche float.

Answer 4

div#footer ul{ 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

div#footer li{ 
    width:155px; 
    float:left; 
    display:block;   
} 

Ce code positionné horizontalement alors que les espaces entre eux. Si vous souhaitez ajouter de l'espace entre les éléments li:

div#footer li{ 
    width:155px; 
    margin-right: 5px; //5px Space between li elements 
    float:left; 
    display:block;   
} 

Answer 5

Cela a été complètement résolu par CSS flexbox.

CSS-Tricks ont un excellent rapport here, et un exemple Codepen en utilisant <ul>here.

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row nowrap; 
 
    justify-content: space-around; 
 
} 
 

 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    margin: 0px; 
 
    
 
    line-height: 40px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    flex: 1 1 auto; 
 
}

<ul class="flex-container"> 
 
    <li class="flex-item">1</li> 
 
    <li class="flex-item">2</li> 
 
    <li class="flex-item">3</li> 
 
    <li class="flex-item">4</li> 
 
    <li class="flex-item">5</li> 
 
    <li class="flex-item">6</li> 
 
</ul>

Je sais que c'est assez vieux, mais je rencontré ce problème 7 ans plus tard en 2015 alors cela pourrait aider quelqu'un d'autre aussi.