「CSS」リストの２段組どのように組まれていますか？（同一カテゴリの場合）

質問

リストの２段組ですが、皆さんどのように組まれていますか？

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー（花）の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
＝＝＝＝＝＝＝＝＝＝＝＝＝
・チューリップ　　・ひまわり
・あじさい　　　　 ・すみれ
・たんぽぽ　　　　・パンジー
＝＝＝＝＝＝＝＝＝＝＝＝＝
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり　・すみれ　・パンジー　の頭は揃えたいです。

苦肉の策で下記のようなマークアップをしています。
<ul class="left">
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
</ul>
<ul class="right">
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
そして左右にfloatさせています。
ただ、これだとリストが途中で分断されてしまって
正しいマークアップとは言えないですよね・・・。

こういうケースって結構あるのでは、と思い、
色んなサイトを巡りましたが見つからず。

皆さんこういったケースの場合どのように組まれてますか？
いっそテーブルの方が良いのでしょうか？
項目は後から追加するものと想定してください。
（縦に可変していきます）

どうぞ宜しくお願いいたします。

回答No.5

noname#83877 · ベストアンサー

確かに下のソースだとIEで駄目でした・・・
以下の部分を追加してください。

.left {
width:251px;
float:left;
clear:left; /* ←追加する場所 */
}

お礼

わかりやすい記述なのにIEだと無理なのか・・・
と残念に思っていたのですが、たしかに記述追加で問題なく表示できるように
なりました！
No.6さんも言っておられますが、確かに目から鱗ですね。

columnというのが実装されてきているということも勉強になりました。
早く普及して欲しいです。

回答No.6

abril

（回答じゃなくてすみません。）
ANo.5様の方法…これで解決できるとは。目から鱗でした。勝手ながら、今後是非使わせて頂こうと思います。
ということで私のANo.4の方法は忘れて下さい（元々お奨めじゃないので…）。

お礼

＞私のANo.4の方法は忘れて下さい（元々お奨めじゃないので…）。

とおっしゃっているにもかかわらず、ソースをコピーして試してみました。すみません・・・。
（回答くださった皆様のを全部、試していたりします・・・）
IE、Firefoxで試しましたが、どちらも崩れなく綺麗に表示されています。
緻密に計算されていてすごいなと思いました。
何よりpositionをもっと勉強してみようと思うきっかけになりました。

ありがとうございました！

回答No.4

abril

アイテムの並び方に拘らなくても良く「左→右→左→右→左→右」になっても構わない様な内容なら、ANo.1様の最初の方法をとりますが、並び方に意味があって「左→左→左→右→右→右」を崩せないとなると難しいですね。ANo.2様の方法は理想的なのですが、例によってIE6/7がだめなので、通常は妥協して質問者様と同じくリストを二つに分けてしまう事が多いでしょうか…

ごく限られた条件（アイテムが頻繁に増減する事がなく、アイテムのテキストが短くかなり文字サイズを拡大しても2行にならない）が整っている場合は、下記の様な方法をとる事もありますが。

<ul class="hoge">
<li class="col1">チューリップ</li>
<li class="col1">あじさい</li>
<li class="col1">たんぽぽ</li>
<li class="col2">ひまわり</li>
<li class="col2">すみれ</li>
<li class="col2">パンジー</li>
</ul>

ul.hoge {
position: relative;
width: 500px;
height: 4.2em;
list-style: none;
margin: 0;
padding: 0;
line-height: 1.4em;
overflow: hidden;
}
ul.hoge li {
width: 50%;
margin: 0;
padding: 0;
}
ul.hoge li.col1 {
position: relative;
left: 0;
}
ul.hoge li.col2 {
position: relative;
top: -4.2em;
left: 250px;
}

heightとline-heightで高さを調整してpositionで右コラムのリストの開始位置を引き戻しています。
ただし、これはアイテム数の増減によって、それらのプロパティの値をその度に再計算して調整しなければならないという手間があります。アイテムが2行になってしまう可能性が高い場合は基本、使いません。

回答No.3

reverie013

あまり参考にならないかもですが。
http://www.google.co.jp/cse?cx=partner-pub-4575936807909242%3A8lcrsa5kagl&q=%83%8A%83X%83g%81@2%97%F1

内容が既出の回答と被ってるかもしれません。

お礼

ご回答ありがとうございます。

同じところでつまづいている方々がいるのだな・・・と。
（いけない安心が・・・）
<ol>を使用して縦並びさせたい、というのも実際にでてきそうなケースだな、
と思いながら参考ページを読ませていただきました。

回答No.2

noname#83877

そのうちモダンブラウザで先行実装されはじめているcolumnが使えそうですが・・・
とりあえず今回のパターンだとこれでもいいかなと思います。

<ul>
<li class="left">チューリップ</li>
<li class="left">あじさい</li>
<li class="left">たんぽぽ</li>
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>

ul {
width:500px;
}

.left {
width:251px;
float:left;
}

回答No.1

font_color

はじめまして。
私も質問者様と同じように左右にfloatさせています。
が、少し試してみました。

ul,liの幅を固定にしてfloatすれば、
2つずつならんでカラム落ちを繰り返すので
左の列の先頭は揃うと思いますが・・。
【html】
<ul>
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
【css】
ul{
width:400px;
}
li{
width:200px;
float:left;
}
でも、これでは順番が
＝＝＝＝＝＝＝＝＝＝＝＝＝
・チューリップ　　・あじさい
・たんぽぽ　　　　・ひまわり
・すみれ　　　　　・パンジー
＝＝＝＝＝＝＝＝＝＝＝＝＝
と変わってしまいますね。
それではソースを少々いじって、
【html】
<ul>
<li>チューリップ<span>ひまわり</span></li>
<li>あじさい<span>すみれ</span></li>
<li>たんぽぽ<span>パンジー</span></li>
</ul>
【css】
ul{
width:400px;
list-style-type:none;
}
li{
background:url(URL)no-repeat;
}
li span{
display:block;
background:url(URL)no-repeat;
text-align:left;
width:200px;
float:right;
margin:-2.25em 0 10;
}
これだと正しいマークアップとは言えないですね。

お礼

ご回答ありがとうございます。

１つ目に提案いただいたものがリストの並び順にこだわらなければ、シンプルで良いです。
難しく考えすぎていたのですが、こんなにすっきりとした記述でOKなんですね。
実は、並び順にこだわる以前の問題だったので、（こだわらなくてもつまづいていた）とても嬉しく思っています。是非活用させていただきます。

「でも順番にこだわるなら・・・」と問題提起して考えていただいた
２案目もありがとうございます！