高さが違うブロックを横並びにするときは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;}
この記事についてるタグ
タグはありません。
関連記事
- »隣接セレクタと間接セレクタを微妙に勘違いしてたのでメモ。
- »CSSで背景画像をcenterにした際に1pxずれる時の対処法
- »高さが違うブロックを横並びにするときはfloatじゃなくてinline-block。
- »GreasemonkeyでYahoo!・Google・bingの検索結果に順位表示。
- »CSSで画像の上に背景画像を乗っける方法。
Sponsored Links
Comment : 0
Track Back : 0
- この記事のトラックバックURL
- http://webruary.blog37.fc2.com/tb.php/67-da6af084