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

Article views1,614 VIEW

150a9af6 s - CSS inline-blockを均等に配置する!普段、ブロック要素を横並びする時にinline-blockを使用しています。

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

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

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

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

sample1
sample2
sample3
sample4

上を

sample1
sample2
sample3
sample4

にしますよ!

やり方は続きを読む

ソースを用意


こういったソースです。

CSSを用意

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

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

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

参考にしたサイト

inline-blockの均等配置

Pocket
pinit fg en rect gray 28 - CSS inline-blockを均等に配置する!
line88x20 - CSS inline-blockを均等に配置する!
[`evernote` not found]

Posted in CSS

Leave a Comment

CAPTCHA