ホーム » ブログ » css一行でli要素を綺麗に横並ばせる方法
このエントリーをはてなブックマークに追加
@2018/01/29

スポンサーリンク
個人サイトを作成しています。ところで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要素を3つ表示できるようにしたいですが、実際に1行2つ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も同じ現象がありましたので、近日中に適用していきま~す。

以上、メモを。



♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

アーカイブ @zanmai.net
check