css一行でli要素を綺麗に横並ばせる方法_ブログ_zanmai.net

個人サイトを作成しています。ところでhtmlタグliを横並び際にli要素を揃わない現象が発生！！
liのCSSコードは簡単にfloat:leftを利用しています。要素が多くて一行に表示し切れなく複数行で表示されますので、2行目以後のli要素は凸凹に並ばれ、全く左右に揃っていない！下記のように見える。
↓----------------------------------------------------↓

li {
	width:calc(100% / 3);
	float: left;
}

• 

↑----------------------------------------------------↑

上記の現象を解消するために、clearfixというfloatを解除する方法もありますが、これは面倒ですし、コード量も増えてしまい理解しにくくなるため、別の方法で現象解消したい。

その後、floatではなくdisplay:inline-blockに利用したら、以前のガタガタに表示されていたli要素は綺麗に揃われていました。
しかし、li要素同士の間に空白が埋められているようですから、元々の予想は1行にli要素を３つ表示できるようにしたいですが、実際に1行２つliしか表示されません。3つ目のli要素は次の行にずらさせて表示されてしまいました。

• 

原因はli同士の間に勝手に空白を埋められる？！。グーグルしたら、li要素の親要素ulにfont-size:0定義入れれば、この意図しない隙間現象を解決しました。
↓----------------------------------------------------↓

ul {font-size:0;}
li {
	width:calc(100% / 3);
	display: inline-block;
	vertical-align: top;
}

• 

↑----------------------------------------------------↑

僕のもう一つのサイトbenri.jpも同じ現象がありましたので、近日中に適用していきま～す。

以上、メモを。