li ３列表示

質問

こんにちは、
下記のliを3列づつ表示したいのですが、
どのようにすればよいでしょうか？
（２列とかはあるのですが・・・tableにすべき？）

<ul id="leftlist1">
<li><a href="#">a1</a></li>
<li><a href="#">a2</a></li>
<li><a href="#">a3</a></li>
</ul>
<ul id="leftlist2">
<li><a href="#">b1</a></li>
<li><a href="#">b2</a></li>
<li><a href="#">b3</a></li>
</ul>
<ul id="leftlist3">
<li><a href="#">c1</a></li>
<li><a href="#">c2</a></li>
<li><a href="#">c3</a></li>
</ul>

回答No.1

ORUKA1951 · ベストアンサー

ul{display:inline-block;width:30%;margin:0;padding-left:2%;}
必要なら、他のulと区別するために、全体をdivで囲んで文書構造を補完しておく
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』

[例]
<div class="nav"><!-- ここはナビゲーションブロックだよ -->
<ul id="leftlist1">
<li><a href="#">a1</a></li>
<li><a href="#">a2</a></li>
<li><a href="#">a3</a></li>
</ul>
<ul id="leftlist2">
<li><a href="#">b1</a></li>
<li><a href="#">b2</a></li>
<li><a href="#">b3</a></li>
</ul>
<ul id="leftlist3">
<li><a href="#">c1</a></li>
<li><a href="#">c2</a></li>
<li><a href="#">c3</a></li>
</ul>
</div>
div.nav{text-align:center;position:relative;width:80%;margin:0 auto;}
div.nav ul{text-align:left;display:inline-block;width:30%;margin:0;padding-left:2%;}
また、幅の狭いディスプレイでは、２列、３列にしてスマホなどにも対応させるなら
div.nav ul li{min-width:200px;}
とかにしておけば、狭いディスプレイでは下に下がります。

display:inline-blockは、IE6,7は対応していませんので、floatで配置する場合もあります。
　いまはあまり必要ないかも・・サイトの対象で判断してください。

★無用なidやclassをつけないようにしましょう。先でデザインを変えるとき悲劇が訪れます。
あくまで「文書構造を補完するメタです」。またidではなくclassを使用するように!!!。基本的にリンクのターゲットになるときやjavascriptのターゲットになるとき以外は使う必要はないでしょう。一意セレクタ#は詳細度が高く不便です。