新米Webデザイナーのペロです。よろしくお願いします。
今日は、ボックスを横並びにしたとき、最後のマージンを調整する方法について書いていきます。
ボックスをfloatさせて横並びにするとき、ボックスの左右どちらかにマージンを持たせると思います。

そうすると必要ないマージンが最後(場合によっては最初)のボックスについてしまい、親要素の両端に合いません。
解決したいけれど、リストの最後の部分だけcssを適用させるのは面倒ですよね。
なので、それ以外の方法で解決してみます。
目次
解決方法
html
<div>
<ul>
<li><img src="image/01.jpg" alt="イメージ1" /></li>
<li><img src="image/02.jpg" alt="イメージ2" /></li>
<li><img src="image/03.jpg" alt="イメージ3" /></li>
</ul>
</div>
css
div{
width: 320px;
border:1px solid #3f3f3f;
}div ul {
width: 330px;
margin-right: -10px;
overflow: hidden;
_zoom: 1;
}div ul li {
float: left;
margin-right: 10px;
}
うーんこれだけで簡単に解決してしまいました。
ポイント
ポイントは、ul に付いている margin-right: -10px; です。
最後の li の margin-right: 10px; を ul の margin-right: -10px; で吸収するような形になっています。
それにしてもoverflow: hidden;は便利です。