<div id="goods">
	<ul>
	<li>
		<dl>
		<dt><img src="CD1.jpg" width="50" height="50" /></dt>
		<dd>ここに商品名が入ります。</dd>
		</dl>
	</li>

	<li>
		<dl>
		<dt><img src="CD2.jpg" width="50" height="50" /></dt>
		<dd>ここに商品名が入ります。</dd>
       </dl>
	</li>

	<li>
		<dl>
		<dt><img src="CD3.jpg" width="50" height="50" /></dt>
		<dd>ここに商品名が入ります。</dd>
		</dl>
	</li>
	</ul>

	<div style="clear:both"></div>

</div>

* { /* CSSのリセット */
  margin: 0;
  padding: 0;
}
#goods {
	font-size: 12px;
	width: 290px;　/* liのマージン左10px分300pxから差し引いた値 */
}
#goods ul {
	list-style-type: none;
	width: 300px;
	margin-right: -10px; /* ここがポイント */
}
#goods ul li {
	width: 90px; /* 商品個々のボックス幅 */
	text-align: center;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}