グローバルナビゲーションを作るときによく使うテクニックとしてフロートがありますが、左寄せで配置されます。今回は中央から配置していくテクニックをご紹介致します。
display inline-block
display inline-blockを利用すればフロートを使わなくても要素を横並びにできます。
対応ブラウザはモダンブラウザ、オールドIE(8以前)は非対応です。
HTMLはこのようにマークアップします。
.nav ul { display:block; /*ポイント!*/ overflow:hidden; position: relative; list-style: none; padding: 0; width:100%; text-align: center; /*ポイント!*/ letter-spacing: -6px; } .nav li { display: inline-block; /*ポイント!*/ border-bottom: none; padding: 0; margin: 0; text-align: center; border-right: 1px solid #ccc; letter-spacing:normal; }
デフォルトの空白を消す
inline-blockでは、デフォルトでマージンが設定されます。下の画像をご覧ください。だいたい、5pxくらいの空白が出来てしまうのです。このままでは、かっこわるいので、空白を消す設定も同時にしておく必要があります。
空白を消すにはletter-spacingを設定する事で対応します。要素のマージンを調整するCSSです。ul部分にマイナスの設定をし、liの部分にnomalを指定する事で空白が消えます。
下記コードは上記のコードに追加で記述してください。
.nav ul { letter-spacing: -6px; /*ポイント!*/ } .nav li { letter-spacing:normal; /*ポイント!*/ }