# inline-blockの均等配置

- リンク: https://torounit.com/blog/inline-block%e3%81%ae%e5%9d%87%e7%ad%89%e9%85%8d%e7%bd%ae/
- 公開日: 2010-11-05T14:23:38+09:00
- 作成者: Toro\_Unit

inline-blockを均等配置するためのCSS。
 現状firefox3.6,ie8で対応確認しました。たぶん
その他モダンブラウザでも効く思われます。

ie7はimgかa要素以外inline-blockが効かないので、非対応。aとimgには効きそうだけれど、
未確認です。。。

[css]
 ul { text-align: justify; text-justify: distribute-all-lines; }

ul:after {
 content:""; display: inline-block; width: 100%; line-height:0; height:
0; }

li {
 display: inline-block; } [/css]

text-align:justifyは最終行の要素には適用されないため、ul:afterで一行分、inline-block
を追加してあげます。

あとは適当に、liとulの大きさを決めてあげれば。