【CSS】のinline-blockで要素を横並びにしてみた!

css

今更の話ですが、ナビゲーションを作成するときは、結構「float」を利用して横並びにすることが多いですが、実はdisplay要素だけでも横並びに出来るのでメモ。

htmlとCSSのコード

そんな難しいことでもないので、簡単にhtmlとCSSのソースコードを張っておきます。

htmlのソースコード

よくある単純なhtmlのコードです。ul要素を使い、a要素で各アイテムを実装。

CSSのソースコード

分かりやすくしたいと思うのでCSSのコードも必要最小限にします。基本的には「display:inline-block;」を使えは自動的に水平になります。

「inline-block」をIE7以下にも対応させる

「inline-block」を使う場合は、「display:inline」 と 「zoom:1」 を併用することでIE7以下にも対応させます。

「inline-block」を使うと要素に隙間ができる

「inline-block」を使うと微妙に隙間が出来てしまうので、その対策として以下の方法があります。

親要素に「font-size:0;」を指定する

「font-size:0」にいてあげることで隙間がなくなります。ただ「inline-block」を指定した子要素で「font-size」を指定してあげないといけませんが一番楽な方法だと思います。

ネガティブマージンを利用した方法

「inline-block」を指定した要素でネガティブマージンを使って調整することで隙間をなくすことができます。

inline-blockを使うメリット

もちろん、「float」を使っても横並びにできるしわざわざ「inline-block」にこだわる必要は無いんですが、やはり幅やpaddingなどの指定もできるし要素の縦の位置の指定やセンター揃えもできるので便利だなぁと思いました。

ナビゲーションをセンター揃えにする

「vertical-align」で要素の上下方向の位置調整