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のコーディングで陥りがちなミスやトラブル
• CSSCSSのみでlightboxを実装
• CSSレスポンシブWebデザインについて
• CSSFirefox、Safari、chiromeでテキストエリアのリサイズをCSSで制御
• CSSfloatさせた要素を簡単にfloat解除させる「clearFix」
• CSSCSS3でborder（ボーダー）のグラデーションを実現

「CSS」の他の記事を読む

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