ボックスを横並びにしたときの最端の余白をなんとかする

画像と画像の間に25pxの余白を持たせた形で横並び（float:left）。普通なら3つめの画像の右余白の25pxが邪魔してカラム落ち。それを防ぐために.rightとかclass振りますが、メンドクサイので無理やりなんとかしてみましょー。（動作未確認。）

html

<div id="productList">

	<ul>
		<li><img src="hoge.jpg" alt="画像" /></li>
		<li><img src="hoge.jpg" alt="画像" /></li>
		<li><img src="hoge.jpg" alt="画像" /></li>
		<li><img src="hoge.jpg" alt="画像" /></li>
	</ul>

<!-- end #productList --></div>

css

#productList｛
	width:800px;
}
#productList img｛
	width:250px;
}
#productList ul{
	list-style:none;
	margin:0 -25px 0 0;
	padding:0;
	zoom:1; /* ie */
}
#productList ul li{
	float:left;
	margin:0 25px 0 0;
	padding:0 0 15px 0;
}

/*----------------------------------------
clearfix
----------------------------------------*/
#productList:after{
	content:".";
	height:0;
	clear:both;
	display:block;
	visibility:hidden;
	font-size:0;
	line-height:0;
}

#productList{
	display:inline-block;
}

/* exlude MacIE5 \*/
* html #productList{
	height:1%;
}

#productList{
	display:block;
}
/* end MacIE5 */