floatを使わずに、横並びのリストを実装

CSS2011年1月14日

floatを使わずに、リスト要素をきれいに横並びにするCSSをご紹介します。

• 実際のサンプル

HTML

<div class="hoge">
<p>display:inline;で横並び</p>
<ul>
<li>リスト</li>
<li>リストリスト</li>
<li>リストリストリスト</li>
<li>リストリストリストリスト</li>
<li>リストリストリストリストリストリストリスト</li>
<li>リストリスト</li>
<li>リストリストリストリストリストリストリストリストリスト</li>
</ul>
</div>

CSS

div.hoge{
width:600px;
margin-bottom:20px;
padding:10px;
background:#efefef;
text-align:left;
font-size:0.78em;
}

div.hoge ul {
width:100%;
}

div.hoge ul li{
margin:0 15px 20px 0;
padding-left:25px;
display:inline-block;
/display:inline;/*IE7*/
/zoom:1;/*IE7*/
background:url(blt-list.gif) no-repeat left top;
background-position:0 0.2em;
zoom:1;
}

ポイントは、「display:inline-block;」と、IE7以下用に「/display:inline; /zoom:1;」を記述している点です。display:inline-block;は横幅がいっぱいになると、自動で次の行を作り出し折り返します。

この記述を加えることで、リストの横幅を気にすることなくきれいに横並びを実現することが可能です。

• 実際のサンプル

float:leftでも横並びは実現できますが、IE6の場合、display:inline;のような賢い挙動をせず、テキストの量によっては見栄えが悪くなります。テキストの量が同じの横並びもしくは画像幅が一定の横並びであればfloatでの実装でもよいでしょう。

• CSSで垂直方向の中央表示を実装
• 画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS

この記事を読んでいる方にオススメの記事

• CSSCSSで垂直方向の中央表示を実装
• CSS設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」
• CSSCSSのみでlightboxを実装
• CSSIE8における拡大縮小バグ
• CSSCSSのデバッグ方法
• CSS角丸背景を画像1枚で実装

「CSS」の他の記事を読む

• ※承認制のため、即時には反映されません。