oct.
27
2015
Attention ! Cet article a plus de 1 an (2773 jours), ce qui signifie qu'il n'est pas forcément à jour !
Ça fait longtemps que je suis Front-End mais il m’arrive encore des trucs, qui quelques fois, me surprennent. Comme de faire un menu super simple et d’avoir un espacement non volontaire. Effectivement en faisant un menu avec un UL et des LI en inline-block, nous finissons avec des espacement entre les LIs.
Comment contrer le whitespace du inline-block
Méthode en collant le code HTML
<ul>
<li>Pommes</li><li>Raisins</li><li>Bananes</li><li>Poires</li><li>Fraises</li>
</ul>
Méthode du HTML comment
<ul>
<li>Pommes</li><!--
--><li>Raisins</li><!--
--><li>Bananes</li><!--
--><li>Poires</li><!--
--><li>Fraises</li>
</ul>
Méthode sans fermeture de tag
<ul>
<li>Pommes
<li>Raisins
<li>Bananes
<li>Poires
<li>Fraises
</ul>
Méthode avec letter-spacing
Avec la même structure ajouter ce CSS
ul{
letter-spacing: -0.31em;
}
ul li {
letter-spacing: normal;
}
Méthode font-size
Avec la même structure ajouter ce CSS
ul {
font-size: 0;
}
ul li {
font-size: 1.8rem;
}
Méthode avec table
Avec la même structure ajouter ce CSS
ul {
display: table;
width: 100%;
table-layout: fixed;
word-spacing: -2em;
}
ul li {
display: inline-block;
word-spacing: normal;
}
Encore une fois vous pouvez voir en action toutes ces techniques en suivant ce lien : DÉMO