CSS inline-blockを均等に配置する!

Article views1,034 VIEW

css3logo_large普段、ブロック要素を横並びする時にinline-blockを使用しています。

ただmarginの設定がとても面倒臭い。。。

「横幅いっぱいで均等に配置してくれんか!?」と常々思っていたものですハイ。

 ついに重い腰をあげ、やり方を探したら簡単に見つかりました。

最初からやってりゃよかったよ。。。

sample1
sample2
sample3
sample4

上を

sample1
sample2
sample3
sample4

にしますよ!

やり方は続きを読む

ソースを用意


こういったソースです。

CSSを用意

これで横並びになります。

text-align
: justify;
text-justify: distribute-all-lines; 

を使って均等に並べているんですね。目からウロコでした。

参考にしたサイト

inline-blockの均等配置

この記事が気に入ったら
いいね ! しよう

Twitter で
Pocket
LINEで送る

Posted in CSS

Leave a Comment

CAPTCHA