inline-blockの均等配置

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の大きさを決めてあげれば。