[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法

ナビゲーションを実装する時など、ul要素を使って水平に並べると意図しない隙間ができてしまうのを解決する方法を紹介します。 Fighting the Space Between Inline Block Elements [ad#ad-2] デモ 解決方法 floatでいいんじゃないの デモ まずは、元となるコードから。 HTML nav要素を使い、a要素で各アイテムを実装します。 <nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav> CSS 「display: inline-block;」を使って水平に並べます。 nav a { display: inline-block; padding: 5px; background: red; } このままだと、下記のように意図しない隙間ができてしまいま

[studio-h]

li,リスト,間が開く

[Falky]

font-size: 0; !!! 気づかなかったそれ！まじか！言われてみりゃ確かに！！//display: table-cell; はIE8+なのでIE7対応の時にはfont-sizeかー

[Yukarigohan]

css inline-blockの隙間

[hopekuson]

結論『floatを使おう』

[yaoki_dokidoki]

これは役に立つ。「inline-blockを使う利点は、「text-align:center;」を使えることです。これは親要素に指定するだけで簡単に真ん中に配置することができます。」

[eclucifer]

親要素に font-size:0; を指定するのは初めて見た。これ楽いなー

[SpeedcoreTokyo]

inline-block要素でナビゲーションリストを作るコツ

[bleu-bleut]

リストの横並び

[site159]

一番最後の　font size 0 は盲点だった

[seteoceano]

ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法

[nao14115]

ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法

[kussun]

おさらい。

[Donca]

✔ [CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法