webruaryと黒猫のウィズ

webruaryの記事一覧 webruaryのRSS

通常のブログ。http://webruary.net/


高さが違うブロックを横並びにするときはfloatじゃなくてinline-block。

Category:Web

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;}
このエントリーをはてなブックマークに追加

Sponsored Links

Comment : 0

Comment Form

Track Back : 0

この記事のトラックバックURL
http://webruary.blog37.fc2.com/tb.php/67-da6af084

トラックバック一覧