[CSS]同じサイズのボックスを横並びにするときのコツ

2013/6/3 2013/8/19 css

ネガティブマージンってイヤですね下山です。

写真のサムネイルを並べてクリックで拡大とかよくやるじゃないですか！やるじゃないですか！やれ！
そのときul liでサムネイルを並べたりするじゃないですか！するじゃないですか！やれよ。
で、隣同士のサムネイルがくっついてるとなんだか残念じゃないですか！残念です！
だから右マージン取ったりするじゃないですか！

でも最後のサムネイルの右マージンどうする？放置？別class追加？

っていうお話です。

まずはhtml

<div class="thumbnail clearfix">
	<ul>
		<li><a href="img/photo_01.jpg"><img src="img/thumb_01.jpg" alt="黄色い花"></a></li>
		<li><a href="img/photo_02.jpg"><img src="img/thumb_02.jpg" alt="ポポンタ"></a></li>
		<li><a href="img/photo_03.jpg"><img src="img/thumb_03.jpg" alt="便所バチ"></a></li>
	</ul>
</div>

<ul>

</ul>

</div>

例えばこう書いた場合CSSは

div.thumbnail {
 width:470px;
 margin:50px auto;
 background:#690; /*分かりやすいように色つけましたよ*/
}
div.thumbnail ul {
 list-style:none;
 width:480px;
 margin-right:-10px; /*これですわい！*/
}
div.thumbnail li {
 float:left;
 width:150px;
 height:99px;
 margin-right:10px;
}