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.2

noname#83877 · ベストアンサー

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

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

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

補足

説明不足ですみません。

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

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

回答No.1

noname#100277

無理ですね。
ul li自体「ブロックレベル」なのだから・・・

お礼

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