ナビゲーションをliで作成して、floatを使用して横並びにする方法はよく使用されます。
面倒なのは横並びのliを中央に揃えることです。

liをfloatして横並びにした例
htmlコード

cssコード

中央揃えする方法

floatしたliを中央揃えにするにはulとliにposition:relativeを設定して、ulの座標をleft:50%とし、liの座標をleft:-50%とします。
Tipsとして知っておくと便利です。

liをfloatして横並びにした後に中央揃えの例
htmlコード

cssコード

カテゴリー: HTML&CSSTips

1件のコメント

8/23 モバイルデザイン – わたしのへや · 2017年8月23日 7:24 PM

[…] フロートしたナビを中央揃えする方法 […]

コメントは受け付けていません。