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