espacement horizontal de navigation css
J'essaie de créer une barre de navigation horizontale en css avec 5 liens espacés uniformément. Le html, espérons-le, restera 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 les espacer uniformément dans le pied de page div. 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 assez 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 me débarrasser de lui? Si j'augmente la taille de la fontsize, l'espacement augmente également.
5 réponses
Ça m'est arrivé. Malheureusement, il est causé par le navigateur qui prend les sauts de ligne entre les éléments de la liste et les rend comme des espaces. Pour corriger, changez votre code HTML en:
<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>
Si vous utilisez ceci:
div#footer li{
width:160px;
display:block;
float: left;
text-align:center;
}
Tout semble beau: D
Les espaces entre vos éléments <li> sont dus aux espaces et aux retours chariot 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 si inline-block's s'affichera bien sur IE6, donc vous pouvez essayer l'approche float.
Cela a été complètement résolu par CSS flexbox.
Les Astuces CSS ont un excellent writeup ici, et un exemple Codepen utilisant <ul> ici.
.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 me rends compte que c'est assez vieux, mais j'ai rencontré ce problème 7 ans plus tard en 2015, donc cela pourrait aider quelqu'un d'autre aussi.
div#footer ul{
margin:0;
padding:0;
list-style:none;
}
div#footer li{
width:155px;
float:left;
display:block;
}
CE code positionné li horizontalement tandis que les espaces entre eux. Si vous voulez 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;
}