[css]フォームの項目の折り返し

photo by taberandrew

 こういう、たくさん項目があって必要なものにチェックを入れてください、というフォームを作ることがあって。

このとき、何も指定していないと、ブラウザはこんなふうに、チェックボックスの後ろで改行されてしまうことがある。
これを避けるために、強制的に改行を入れる人がいて。
<div style="border:1px solid black;width:200px;padding:10px;">
	<label><input type='checkbox' name='field[]' value='1' />山手線</label>
	<label><input type='checkbox' name='field[]' value='2' />京浜東北・根岸線</label><br/>
	<label><input type='checkbox' name='field[]' value='3' />中央線</label>
	<label><input type='checkbox' name='field[]' value='4' />常磐線</label><br/>
	<label><input type='checkbox' name='field[]' value='5' />東海道本線</label>
	<label><input type='checkbox' name='field[]' value='6' />総武線</label>
</div>
より力ずくの例としては、テーブルにして行を切ってしまうとか。
そういう方法でも一応問題は解決するんだけど、後日路線が増えたら関係ないところまで直さないといけないし、フォントサイズを変えている人がいたら意味不明なところで改行される恐れもあって、できればこういうことはしたくないものですよね。

で、スマートにやる方法。
<blockquote>
<div style="border:1px solid black;width:200px;padding:10px;">
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='1' />山手線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='2' />京浜東北・根岸線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='3' />中央線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='4' />常磐線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='5' />東海道本線</label>
	<label style="white-space:nowrap;"><input type='checkbox' name='field[]' value='6' />総武線</label>
</div>
</blockquote>
こういう風に、改行されたら困る単位で"white-space:nowrap;"を指定してあげれば、それ以外の位置を見つくろって改行してくれるので、内容が変わってもフォントサイズが変わっても大丈夫なコードになります。

#ここでstyle=""を使っているのは、見やすさのためなので、本来はもちろんCSS上で適当なセレクタに"white-space:nowrap;"を指定しましょう。

当たり前の話なんだけど、なぜか強引に改行を挿入する人がいっぱいいるみたいなので書いてみた。
カテゴリ:

トラックバック(0)

このブログ記事を参照しているブログ一覧: [css]フォームの項目の折り返し

このブログ記事に対するトラックバックURL: http://mogya.com/mt/mt-tb.cgi/760

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、 もぎゃが 2009年7月24日 17:19に書いたブログ記事です。

ひとつ前のブログ記事は「 デザイナさんにメイドめーるのデザインを駄目出ししていただいた 」です。

次のブログ記事は「 CentOSリーダー失踪事件の続報(の日本語訳) 」です。

最近のコンテンツは インデックスページ で見られます。過去に書かれたものは アーカイブのページ で見られます。

Powered by
Movable Type