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

css

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

htmlとCSSのコード

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

htmlのソースコード

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

CSSのソースコード

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

	
	ul li{
		display:inline-block;
		\display:inline;
		\zoom:1
	}
「inline-block」をIE7以下にも対応させる

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

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

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

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

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

    ul{
     font-size:0;
    }

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

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

    ul li{
     display:inline-block;
     *display:inline;
     *zoom:1;
      margin-right:-5px;　/* ネガティブマージンで調整して隙間を無くす */
     }

inline-blockを使うメリット

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

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

ul li{
    text-align:center:
    display:inline-block;
    *display:inline;
    *zoom:1;
	margin-right:-5px;　/* ネガティブマージンで調整して隙間を無くす */
	}

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

    ul li{
    display:inline-block;
    *display:inline;
    *zoom:1;
     vertical-align:middle;　/* 中央揃えにする */
	}