[CSS]float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-blockで要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。
PX単位で隙間を埋める
一番分かりやすいのが、隙間分だけネガティブマージンで隙間を埋める方法です。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> ul li { display:inline-block; /display:inline; /zoom:1; padding: 5px; margin:0 -5px } </style> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> |
marginの値はデザインに合わせて補正します。
＊IE6まで対応となると、別途IE用のハックが必要かもしれません。
要素のマークアップを変更
<li>タグの改行位置の調整
コリス様の記事によると、以下のようにマークアップすると要素間の隙間が埋まる模様。|
1 2 3 4 5 |
<ul> <li>リスト1</li ><li>リスト2</li ><li>リスト3</li> </ul> |
または、以下のように </li>の位置をずらす方法でも隙間を埋める事ができるようです。
|
1 2 3 4 5 6 |
<ul> <li> リスト1</li><li> リスト2</li><li> リスト3</li> </ul> |
子要素にコメントタグの挿入
子要素の間にコメントタグ（<!– –>）を挿入することでも、隙間は埋まるようです。|
1 2 3 4 5 |
<ul> <li>リスト1</li><!-- --><li>リスト2</li><!-- --><li>リスト3</li> </ul> |
親要素に font-size:0 を指定
親要素にfont-size:0を指定する方法です。子要素にはフォントンサイズを指定する必要がありますが、HTML側でタグの位置を調整する必要がないので、この中では使えそうな方法のような気がします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> ul { font-size:0 } ul li { font-size:12pt } </style> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> |
ここまでの対処法を、以下のサンプルページにまとめてみました。
display:inline-block で並べた要素間の隙間を埋めるデモ
参考ページ
[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法
コメント