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

画像と画像の間に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 */
  • ブックマーク
  • Feedly

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします