inline-blockの隙間をなくす方法2つ

  • あとで読みたい人は…

@cappeeです。

inline-block はとても便利なのでよく使うのですが、リストの間に隙間ができてしまいます。それを解消する方法2つです。

inline-blockの書き方

まずはinline-blockの記述方法です。下記のようにCSSハックを使えばIE6、7にも対応します。

.inlineBlock li {
 display: -moz-inline-box;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 }

inline-blockの隙間をなくす方法

HTMLを変更する

HTML側のタグの改行を削除するか改行をコメントアウトすると隙間がなくなります。

改行を削除

<ul class="inlineBlock">
<li>ボックス</li><li>ボックス</li><li>ボックス</li>
</ul>

改行をコメントアウト

<ul class="inlineBlock">
 <li>ボックス</li><!--
 --><li>ボックス</li><!--
 --><li>ボックス</li>
</ul>

CSSを変更する

CSS に letter-spacing を指定して隙間をなくします。

.inlineBlock {
 letter-spacing:-0.4em;
 }
 .inlineBlock li{
 letter-spacing:normal;
 display: -moz-inline-box;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 }
Pocket
article clipper inline blockの隙間をなくす方法2つ

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)