Il peut arriver que, d’une manière totalement illogique, des marges gauche et droite viennent se glisser entre les éléments d’une même liste horizontale.
Ces marges sont dues à la présence d’espaces, de sauts de ligne ou de retours chariots dans votre code source entre les balises frères qui constituent la liste.
Pour remédier à cela, il existe 2 solutions consistant à supprimer tout espace entre ces balises :
1. Placer un commentaire HTML vide entre chaque élément de liste :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="mobile-menu"> <li> <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-account">Account</button> </li><!-- --><li> <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-cart">Cart</button> </li><!-- --><li> <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-topsearch">Search</button> </li><!-- --><li class="nav"> <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-nav">Nav</button> </li> </ul> |
2. Coller les balises frères :
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul class="mobile-menu"> <li> <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-account">Account</button> </li><li> <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-cart">Cart</button> </li><li> <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-topsearch">Search</button> </li><li class="nav"> <button type="button" class="collapsed mobile-menu-item" data-toggle="collapse" data-target="#mobile-nav">Nav</button> </li> </ul> |