今日覚えたHTML：リストを2列に

tool

スタイルシートで次のように定義。「two-column」としているところは、任意の文字列でOK。



.two-column{

  float : left;

  width : 100%;

}

.two-column li{

  float : left;

  width : 50%;

}
そのうえで、2列にしたいリストのところで次のように指定。


<ul class="two-column">

<li>りんご</li>

<li>みかん</li>

<li>さくらんぼ</li>

</ul>
IEで見たらリスト頭の中黒が消えるという現象発生も、Firefoxだと無問題。

追記（2010年8月18日）

Chromeで見てもリストのマークは消えますね。
これの応用として、



.two-column li{

  float : left;

  width : 25%;

}
とすれば4列に、33%なら3列に、20%なら5列になりますよ。