文字数の違う複数の項目をliタグを使って綺麗に並べるTips

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

フォームの選択項目をliタグとcssのfloat、min-width、white-spaceを使って綺麗に並べるTipsです。

登録フォームを動的に作っていると、選択項目がとにかく多い！という事態に遭遇します。

静的なら1つずつtdで切って、文字が長ければcolspanで〜とできるわけですが、
動的に出してるとそういう細かい芸当は無駄にややこしいので、
できるだけ手軽に、できるだけ見栄えよく並べるために、リストタグを活用します。

並べたい項目は以下の通り。

たぬきうどん
きつねそば
天丼
鶏ガラしょうゆラーメン
特選月見そば
みそラーメン
明太子スパゲッティ
ざるそば
もりそば
ナポリタン
森のきのことじゃこの和風スパ
ざるうどん
ペペロンチーノ

縦に並べるとページが長くなってしまうので、横に並べる事にします。
cssはこんなカンジ。

li {
float: left;
margin-right: 5px;
}

たぬきうどん
きつねそば
天丼
鶏ガラしょうゆラーメン
特選月見そば
みそラーメン
明太子スパゲッティ
ざるそば
もりそば
ナポリタン
森のきのことじゃこの和風スパ
ざるうどん
ペペロンチーノ

なんとなく見づらい。
文字数がバラバラなので、揃えたいけど一番短いのが2文字、長いのは14文字。
とりあえず14文字にあわせてみます。

li {
float: left;
margin-right: 5px;
width: 14em;
}

たぬきうどん
きつねそば
天丼
鶏ガラしょうゆラーメン
特選月見そば
みそラーメン
明太子スパゲッティ
ざるそば
もりそば
ナポリタン
森のきのことじゃこの和風スパ
ざるうどん
ペペロンチーノ

だいたい良くなりました。
贅沢言うと右が空きすぎて、そこに詰められればもうちょっと長さを節約できそう。
平均して6文字くらいに収まる項目が多そうなので、６文字分の幅にしてみます。
このときpxで指定するよりもemで指定する方が直感的で調整しやすいのでemを使います。

li {
float: left;
margin-right: 5px;
width: 6em;
}

たぬきうどん
きつねそば
天丼
鶏ガラしょうゆラーメン
特選月見そば
みそラーメン
明太子スパゲッティ
ざるそば
もりそば
ナポリタン
森のきのことじゃこの和風スパ
ざるうどん
ペペロンチーノ

右の方空間は無駄にならなくなったけど、ちょっと困った状態になりました。
6文字以上ある場合は、幅に応じて伸びて欲しい。
そこでmin-widthを使ってみます。
min-widthはIE6では対応されないので、IE6用のハックも併記して、
幅も自由に伸びるようにwhite-spaceも書いておきます。

li {
float: left;
margin-right: 5px;
width: auto;
min-width: 6em;
white-space: nowrap;
}
* html .sample5 li { width: 6em; }

たぬきうどん
きつねそば
天丼
鶏ガラしょうゆラーメン
特選月見そば
みそラーメン
明太子スパゲッティ
ざるそば
もりそば
ナポリタン
森のきのことじゃこの和風スパ
ざるうどん
ペペロンチーノ

長いものは文字数に応じて伸びるようになりました。
6文字幅だと普通に並べたのとあんまりかわらない…ので、もうちょっと調整します。

li {
float: left;
margin-right: 5px;
width: auto;
min-width: ９em;
white-space: nowrap;
}
* html .sample5 li { width: 9em; }

たぬきうどん
きつねそば
天丼
鶏ガラしょうゆラーメン
特選月見そば
みそラーメン
明太子スパゲッティ
ざるそば
もりそば
ナポリタン
森のきのことじゃこの和風スパ
ざるうどん
ペペロンチーノ

綺麗にならびました。

ちなみに今回のようにliタグがfloatするときは、無駄になってもいいからとにかくulタグのclassにclearfixを入れておきます。
#clearfixについては以前の記事を参照

これでエンジニアに複雑な条件分岐をお願いする必要もなくなるので、
みんな幸せになれそうです。