ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

横並びのリスト(ボックス)の両端をきっちりと揃える方法

October 08 2013

商品一覧のサムネイル、そして簡単な説明文なんかを並べる時に
liタグを使ってフロートさせるのは毎度よくある話でして。

大抵、その場合にはボックスの右側に10pxとかのマージンを設定するのだけど
それだと一番右のボックス(3列なら3つめのボックス)の右側が空いてしまう。

こんな感じでボックスの右端が余ってしまう。

こんな感じでボックスの右端が余ってしまう。

それなら3つめのボックスだけにmargin-right:0を設定すりゃいいやん、と
思っていたんですけども、いちいちその為だけにクラス振るのも美しくない。

なのでこのリストの親ボックスにoverflow:hiddenを設定し、
リストにネガティヴマージンを設定してしまおう、というのが今回の狙い。

HTML

<div class="wrapper">
<ul>
<li>PHOTO</li>
<li>PHOTO</li>
<li>PHOTO</li>
</ul>
</div>

CSS

.wrapper{
    width: 390px;
}
.wrapper ul{
    margin: 0 -10px 0 0;
    overflow: hidden;
    _zoom: 1;
}
.wrapper ul li{
    float: left;
    margin: 0 20px 10px 0;
    width: 120px;
    display: inline;
}

※zoomとdisplay:inlineは今は亡きIE6さん用。

これだといちいち右端のボックスにクラスを振らなくてもいいのが便利。
というか、「勝手にクラス付けるなボケ」って場合もありますし、
何より「クラス付けてもらって悪いけどやっぱ4列でお願い!」なんていう
地獄からの囁きが聞こえた場合も、「いっすよー」と笑顔で返せるのが便利。

「勝手にボックス足さないでくれる?」って場合もありそうですが。
その場合は・・・・そん時に考えるわ・・・・

・・・・・こういうのって書いとかないと忘れるんだよな・・・・

| Posted in CSS | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Apr 2017 May 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31