ボックスを横並びにしたとき、最後のマージンを調整する方法

新米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;
}

うーんこれだけで簡単に解決してしまいました。

それにしてもoverflow: hidden;は便利です。

この記事は

Interest Speaker > How to / Tips > ボックスを横並びにしたとき、最後のマージンを調整する方法

この記事と類似または関連した記事

CSS によるロールオーバー
CSS によるロールオーバー
1枚の画像に複数のリンクを貼る方法
1枚の画像に複数のリンクを貼る方法
webフォント
webフォントを使ってサイトの表現力をアップ