cssでclearfixを使わずに並べる方法

リストタグを横に並べる時

<ul>
    <li>その1</li>
    <li>その2</li>
    <li>その3</li>
</ul>

だと、

ul{
    width: 615px;
    margin: 0 -15px 0 0;
    overflow: hidden;
    _zoom: 1;
}
li{
    width: 190px;
    margin-right: 15px;
    float: left;
}

とすると、横幅が190pxのliが3つならんで、間隔が15px合計横幅が600pxのものができる。

liの一番右のマージンをulのネガティブマージンにして、相殺しているのと、overflow:hiddenを使う事で、縦幅が認識される事を利用しているのが、素敵だと思います。

参考: 覚えて良かったCSSテクニック

  • written on 2012.10.25
  • category : css

Next / Prev

前の記事:

次の記事:

Same Category

Page top↑