• RSS

[CSS]float を利用せずに display:inline-block で要素を横並びにする方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

グローバルナビのメニューリンクを横並びにしたり、ギャラリー型サイトで画像をタイル状に横に並べたりと、サイト構築時に要素を横並びにするに当たってCSSの floatdisplay を使うことが多いと思います。

floatdisplay とでは見え方にどのような違いがあるか?について、サンプルも交えて紹介いたします。

float:left の場合

まずは float:left で要素を横並びにするサンプルです。
<style>
.navi 		{
	width:100%;
	margin:0 auto
}

.navi li		{
	float:left;
	border:1px solid #ccc;
	padding:5px 10px;
	text-align:center
}
</style>

<ul class="navi clearfix">
    <li><a href="#">リスト1</a></li>
    <li><a href="#">リスト2</a></li>
    <li><a href="#">リスト3</a></li>
    <li><a href="#">リスト4</a></li>
    <li><a href="#">リスト5</a></li>
    <li><a href="#">リスト6</a></li>
    <li><a href="#">リスト7</a></li>
    <li><a href="#">ちょっと<br />
    長い名前の<br />
    リスト</a></li>
</ul>
各要素が横並びになりますが、float: の場合は、回り込み解除の処理も同時に必要になります。
[CSS]float を利用せずに、display:inline-block で要素を横並びにする方法

display:inline-block の場合

display:inline-block を利用する場合のサンプルです。
<style>
.navi 		{
	width:100%;
	margin:0 auto
}

.navi li		{
	display:inline-block;
	border:1px solid #ccc;
	padding:5px 10px;
	text-align:center
}
</style>

<ul class="navi clearfix">
    <li><a href="#">リスト1</a></li>
    <li><a href="#">リスト2</a></li>
    <li><a href="#">リスト3</a></li>
    <li><a href="#">リスト4</a></li>
    <li><a href="#">リスト5</a></li>
    <li><a href="#">リスト6</a></li>
    <li><a href="#">リスト7</a></li>
    <li><a href="#">ちょっと<br />
    長い名前の<br />
    リスト</a></li>
</ul>
同じく各要素は横並びになりますが、要素間の隙間が生じます。
[CSS]float を利用せずに、display:inline-block で要素を横並びにする方法

display:inline-block による横並びを IE7 以下にも対応させる

display:inline-block を使う場合は、display:inlinezoom:1 を併用することでIE6、IE7 にも対応させてあげます。
<style>
.navi li		{
	display:inline-block;
	/display:inline;
	/zoom:1
}
</style>


要素の縦位置を揃える

display:inline-block を使う場合は、vertical-align: で要素の上下方向の位置調整が可能です。
<style>
.navi 		{
	width:100%;
	margin:0 auto
}

.navi li		{
	display:inline-block;
	/display:inline;
	/zoom:1;
	vertical-align:middle;
	border:1px solid #ccc;
	padding:5px 10px;
	text-align:center
}
</style>

<ul class="navi clearfix">
    <li><a href="#">リスト1</a></li>
    <li><a href="#">リスト2</a></li>
    <li><a href="#">リスト3</a></li>
    <li><a href="#">リスト4</a></li>
    <li><a href="#">リスト5</a></li>
    <li><a href="#">リスト6</a></li>
    <li><a href="#">リスト7</a></li>
    <li><a href="#">ちょっと<br />
    長い名前の<br />
    リスト</a></li>
</ul>
各要素が横並びになり、要素間の隙間が生じますが、vertical-align:middle によって上下方向の位置を中央揃えにすることができます。
[CSS]float を利用せずに、display:inline-block で要素を横並びにする方法

display:inline-block によって要素間に生じた隙間を消す方法は、別途[CSS]CSS の display:inline-block で並べた要素間の隙間をなくす方法の記事で紹介しておりますので、こちらも合わせて参考にしてみてください。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

一行足すだけでリストなどが横並びになる便利なコード – Smart Pocke にコメントする コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください