CSSでflotさせた要素を親要素で幅いっぱいに表示したい

以下のHTMLソースで、リストをfloatで横並びにし、
親のdivに対して3列ずつで左右余白なく幅いっぱいに
表示させたいと考えております。

<div>
<ul>
<li><img></li>
<!-- 複数リストを繰り返し -->
<li><img></li>
</ul>
</div>

例えば以下のようなCSSを書いた場合、

　div {width:500px;}
　li {float:left; width:150px; margin-left:10px;}

左端はそろいますが、右端に余白が出来てしまいますよね。

各リストに対して左端用クラス、右端用クラスみたいなものを
指定すれば実現は可能だと思いますが、出来るだけHTMLを編集せず
実現したいと考えております。

IE6~7・safariでとりあえず表示させたいです。
どなたか知識のある方、ご教授の程よろしくお願いいたします。

No.1 回答者： noname#100277 回答日時： 2008/12/11 22:54

無理ですね。

ul li自体「ブロックレベル」なのだから・・・

この回答へのお礼

やっぱり無理ですかね～・・・

お礼日時：2008/12/12 09:00

No.2 ベストアンサー 回答者： noname#83877 回答日時： 2008/12/12 01:01

divにwidthを指定しても良いのであれば、liに指定するwidthの3倍の値を指定すればよい気がしますが。

div {width:501px;}
li {float:left; width:167px;}

何か不都合でもあるんでしょうか？

この回答への補足

説明不足ですみません。

li内にはimgを配置し、liよりも幅が小さいものになります。
liもしくはimgの間隔は等間隔のマージンをあけ、
imgを親要素の最大幅まで持って来たいのです。

何かいい知恵ありましたらご教授お願い致します。

補足日時：2008/12/12 08:57