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

2013/8/19 css

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

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

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

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

っていうお話です。

まずはhtml


	
    
		
  • 黄色い花
    • 
		
  • ポポンタ
    • 
		
  • 便所バチ
    •

例えばこう書いた場合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;
}

とすれば右端のマージンはなくなってhtmlもCSSもスッキリ気持ちいいですよね！

demo