liで作る横並び（3列）のバナーリスト

CSSのfloatを使ってバナーを横並びにしています。

3列バナー横並び
220px+20px+220px+20px+220px=700px
はみ出た余白は、margin-right:-20px;でカットしています
背景色は範囲を分かりやすくするためにつけています。マウスオーバー用に画像もCSSも作っていますが、不要なら削除してください。

デモページへ

HTMl

<div class="mod_Banner001">
<ul class="ex_clearfix">
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
<li><a href="#"><img src="Banner_001.gif" width="220" height="120" alt="バナー" /></a></li>
</ul>
<!-- mod_Banner001_end --></div>

CSS

.mod_Banner001{
	width:700px;
	background-color:#EEE;
}
.mod_Banner001 ul{
	width:720px;
	margin-right:-20px;
}
.mod_Banner001 li{
	width:220px;
	height:60px;
	float:left;
	padding:0 20px 0px 0;
	margin:0 0 10px 0;
	overflow:hidden;
}
.mod_Banner001 li a{
	display:block;
}
.mod_Banner001 li a:link    {}
.mod_Banner001 li a:visited {}
.mod_Banner001 li a:hover   {margin-top:-60px;}
.mod_Banner001 li a:active  {margin-top:-60px;}