CSSを使う

全体幅のmarginで調整

まず要素と要素の間の余白(A)を決め、全体幅(B)から引いた値(C)を、要素の数(D)で割ります。

例えば、(A)=10px、(D)=３、(B)=320pxの場合、320-10×2=300px。

この値を(D)で割ると１つの要素幅が100pxとなります。これをfloatで回り込ませて、余白10pxを指定すると、（100px+10px）×3＝330pxとなり、全体幅から10pxはみ出てしまいます。そこで、親要素のulにmargin-right:-10pxを指定するのがポイントとなります。

<div class="wrapper">
	<ul>
    	<li>floatコンテンツ</li>
    	<li>floatコンテンツ</li>
    	<li>floatコンテンツ</li>
    </ul>
</div>

#wrapper {
	width: 320px; /*全体の幅*/
}
    #wrapper ul {
    width: 330px; /*マージンを含む子ボックス合計幅*/
    margin-right: -10px; /*はみ出しを調整*/
}
#wrapper ul li {
    width: 100px;
    float: left;
    margin-right: 10px;
}

last-childを使用

css3ではlast-childというスタイルがあり、これは疑似クラスの一種でリストの最後にだけスタイルを指定することができる。

ただし、最後の要素にしか適用されないため、1行毎に設計する必要がある。また、現時点でIE8等対応していないブラウザもあるため、推奨環境に応じて対策が必要です。

検索のヒント

jqueryを使う

jqueyにも各親要素内のすべての最後の子要素を選択するセレクターが用意されています。

覚えてしまえば簡単ですので、ぜひこちらも利用してみましょう。