webruary

webbiboさんにて紹介されていた『floatを使わずにinline-blockで横並びにする方法』を参考に自分用メモ。

高さが違うブロックを横並びにするときはfloatじゃなくてinline-block。のサンプルページ。

html

<ul>
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ<br />たちつてと</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><!--
  --><li>あいうえお<br />かきくけこ<br />さしすせそ</li><
</ul>

css

ul{
  list-style:none;
  width:330px;
  padding:0;
  margin:0;
}

ul li{
  display:inline-block;
  vertical-align:top;
  width:78px;
  padding:10px;
  margin:0 10px 10px 0;
  border:1px solid #ccc;
  background:#f7f7f7;
}

* html ul li{display:inline; width:100px; zoom:1;}
*:first-child+html ul li{display:inline; zoom:1;}