記事の詳細
[css]floatを使わずに要素を横並びにする方法「display:inline-block;」
グローバルナビなど、要素を横並びにしたいときに、floatを使って横並びにすることが多いと思いますが、僕は今回紹介する「display:inline-block;」を使う方法を知ってからはこっちを良く使うようになりました。
floatを使った横並びについて
まずはfloat:left;を使って横並びにする場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style> .blobal_navi ul { width: 100%; margin: 0 auto; list-style: none; text-align: center; } .blobal_navi li { float: left; border: #eeeeee 1px solid; padding: 20px 35px; text-align: center; } </style> <ul class="blobal_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> </ul> |
このようにfloatでも横並びになります。
ただ、このままだと次に続く要素が崩れてしまうため、clear:both;で回り込みの解除をする必要があります。
これが結構めんどうだったりします。
display:inline-blockを使う場合
先ほどのliにfloatではなくdisplay:inline-block;を指定します。
1 2 3 4 5 |
.blobal_navi li { border: #eeeeee 1px solid; padding: 20px 35px; display: inline-block; } |
するとこのようにdisplay:inline-block;でも横並びになりました。
display:inline-block;なら回り込みの解除も必要ないので簡単です。
あれ?隙間ができてしまう?
先ほどの画像を見るとわかるのですが、要素と要素の間に隙間ができてしまいます。
レスポンシブウェブデザインなどで、均等に5等分で表示させるためにwidth:20%;を指定してみましょう。
1 2 3 4 5 6 |
.blobal_navi li { border: #eeeeee 1px solid; padding: 20px 0; display: inline-block; width: 20%; } |
隙間ができた分、ずれてしまいました。
ulにfont-size:0;を使う
ずれを修正するには、ulにfont-size:0;を指定して、liに実際のfont-sizeを指定します。
1 2 3 4 5 6 7 8 9 10 |
ul.blobal_navi { font-size: 0; } .blobal_navi li { border: #eeeeee 1px solid; padding: 20px 0; display: inline-block; width: 20%; font-size: 16px; } |
無事修正できました。
以上、floatを使わずに要素を横並びにする方法でした。
簡単に実装できるのでぜひ試してみてください。
今回、参考にした記事はこちら
[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法
【CSS】ul,olのリストを横並びにするときにfloatじゃなくてdisplay:inline-blockを使う方法
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。