Inline-block a bílé znaky
Při zadávání šířky elementům s display: inline-block je nutné myslet na bílé znaky (whitespace).
Mějme jednoduchý cíl: umístit do řádku 3 odkazy, každý 100 px široký s 5px mezerou mezi nimi. Výsledná celková šířka by proto měla být 310 px (šířka: 3 * 100 px + odsazení: 2 * 5 px).
Proč se to tedy do obalu o šířce 310 pixelů ↑ nevejde a třetí odkaz odskočí na další řádek?
Na vině jsou mezery/odřádkování mezi jednotlivými odkazy (samostatná ukázka).
<a href="#">Odkaz</a> <a href="#">Odkaz</a>Řešení
První možnost je v HTML kódu mezery odstranit (ukázka):
<a href="#">Odkaz</a><a href="#">Odkaz</a>Případně pro lepší přehlednost posunout koncovou značku (ukázka).
<a href="#">Odkaz</a
><a href="#">Odkaz</a>Nebo zakomentovat (ukázka). Moc elegantní se mi to ale nezdá.
<a href="#">Odkaz</a><!--
--><a href="#">Odkaz</a>Ještě je možné se mezer zbavit nulovou velikostí písma (font-size: 0) pro rodiče a následným obnovením velikosti pro položky s inline-block (ukázka). Není to ale úplně spolehlivé a nenávratně se tím rozhodí relativní velikosti písma.
Jinak se nabízí na inline-block resignovat a použít:
Související články
Jak udělat input s automatickou šířkou podle obsahu
Několik způsobů, jak dosáhnout toho, aby se textové pole rozšiřovalo a zužovalo podle délky zadaného textu.
CSS @starting-style
Jak animovat elementy při jejich prvním zobrazení pomocí at-pravidla @starting-style.
