Est-ce qu’il vous est déjà arrivé de ne pas comprendre pourquoi, dans une liste d’éléments utilisant la propriété display: inline-block, il pouvait y avoir un élément  qui passe à la ligne, sans raison apparente ?

Prenons un exemple pour y voir plus clair :

Dans l’exemple ci-dessus, il y a 5 éléments et chaque élément de la liste a une largeur de 20%, soit 100% en tout. Il n’y a pas de marge extérieure appliquée donc tous les éléments devraient tenir sur la même ligne.

Cependant, dans le cas d’éléments de type inline-block, chaque espace compte. Si l’on regarde la structure HTML, on constate que par soucis de lisibilité, les éléments de liste sont à la ligne.

2 solutions pour résoudre ce problème

La 1ère (et moins pratique) est de supprimer tous les espaces dans la liste ul au sein de la structure HTML. Ce qui donnerait le code HTML suivant :

<ul>
  <li>First list</li><li>Second list</li><li>Third list</li><li>Fourth list</li><li>Fifth list</li>
</ul>

La 2ème (et plus élégante à mon sens) est d’utiliser la propriété font-size avec la valeur 0 sur le container parent de la liste et d’appliquer la taille de police aux éléments de la liste directement, sans toucher au code HTML.

Exemple :