質問: のように表示させたい場合です。 投稿した後に表示がズレるかもしれませんが、 ・ひまわり ・すみれ ・パンジー の頭は揃えたいです。 苦肉の策で下記のようなマークアップをしています。 * チューリップ * あじさい * たんぽぽ * ひまわり * すみれ * パンジー そして左右にfloatさせています。 ただ、これだとリストが途中で分断されてしまって 正しいマークアップとは言えないですよね・・・。 こういうケースって結構あるのでは、と思い、 色んなサイトを巡りましたが見つからず。 皆さんこういったケースの場合どのように組まれてますか? いっそテーブルの方が良いのでしょうか? 項目は後から追加するものと想定してください。 (縦に可変していきます) どうぞ宜しくお願いいたします。
回答: アイテムの並び方に拘らなくても良く「左→右→左→右→左→右」になっても構わない様な内容なら、ano.1様の最初の方法をとりますが、並び方に意味があって「左→左→左→右→右→右」を崩せないとなると難しいですね。ano.2様の方法は理想的なのですが、例によってie6/7がだめなので、通常は妥協して質問者様と同じくリストを二つに分けてしまう事が多いでしょうか... ごく限られた条件(アイテムが頻繁に増減する事がなく、アイテムのテキストが短くかなり文字サイズを拡大しても2行にならない)が整っている場合は、下記の様な方法をとる事もありますが。 * チューリップ * あじさい * たんぽぽ * ひまわり * すみれ * パンジー 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行になってしまう可能性が高い場合は基本、使いません。