Inline-block a bílé znaky

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:

  • Tabulkové zobrazení display: table-cell (ukázka). Funkční od IE 8.
  • Odkazy floatovat (ukázka). Funkční všude.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Kreslení v CSS

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře