Horizontální navigace

Asi nejjednodušší možnost vytvoření navigace s odkazy vedle sebe je prosté naházení odkazů do <div>u.

To není úplně špatné:

• jednotlivé odkazy můžeme zbavit podtržení (text-decoration: none),
• nějak hezky obarvit (background: #fff),
• přidat odsazení (padding: .3em),
• nebo položky vycentrovat (text-align: center pro nadřazený element)

Jakmile ale bude potřeba měnit výšku nebo šířku jednotlivých odkazů, narazíme na problém, protože odkazy jsou řádkové. Naštěstí existují způsoby, jak dostat vedle sebe i bloky.

Inline-block

Přidáním display: inline-block pro získáme výhodu řádkových i blokových elementů najednou.

Vše bude fungovat jako dřív a navíc půjde měnit rozměry. Bezproblémové centrování je samozřejmost.

Obtékání

Druhá možnost je položky menu nechat obtékat. Nicméně nevidím důvod pro použití obtékání místo řešení s inline-block. Nenapadá mě žádná výhoda takového postupu.

Snad jen může být problém v mezerách mezi položkami, které vzniknou při inline-block řešení a umístěním každného odkazu v HTML kódu na zvláštní řádek. Řešením je umístit všechny odkazy ihned za sebe nebo odřádkování zakomentovat.

   <a href=#>Odkaz</a><!--
--><a href=#>Odkaz</a>

Nebo nakonec opravdu použít ten float.

Kromě nevýhody, že je nutné řešit clearování bude obtíženější obtékané menu vycentrovat.

Sémantika

Někdo by mohl namítat, že menu patří do značky <menu> nebo alespoň seznamu (<ul>) a odkazy do položek <li>. Osobně se domnívám, že takové strukturování prakticky nikdo neocení a je to jen práce navíc. Ale nic neřešitelného to také nepředstavuje.

V podstatě stačí jen vynulovat margin a padding, odstranit odrážky (listy-style: none) a z položek udělat třeba řádkové elementy (display: inline).

Fixní menu

Vodorovné menu není problém na stránce zafixovat (position: fixed), může být samozřejmě i fixované jen někdy podobně jako boční panel.

Vycentrování fixního menu lze zajistit přes left: 50%; margin-left: -(polovina šířky).