[CSS]float を利用せずに display:inline-block で要素を横並びにする方法
スポンサード
スポンサード
グローバルナビのメニューリンクを横並びにしたり、ギャラリー型サイトで画像をタイル状に横に並べたりと、サイト構築時に要素を横並びにするに当たってCSSの float
や display
を使うことが多いと思います。
float と display とでは見え方にどのような違いがあるか?について、サンプルも交えて紹介いたします。
目次
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: の場合は、回り込み解除の処理も同時に必要になります。
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>同じく各要素は横並びになりますが、要素間の隙間が生じます。
display:inline-block による横並びを IE7 以下にも対応させる
display:inline-block を使う場合は、display:inline
と zoom: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
によって上下方向の位置を中央揃えにすることができます。display:inline-block
によって要素間に生じた隙間を消す方法は、別途[CSS]CSS の display:inline-block で並べた要素間の隙間をなくす方法の記事で紹介しておりますので、こちらも合わせて参考にしてみてください。 スポンサード
コメント