(perl)1列に配列されているチェックボックスを3列に配列したいのですが、どうすればいいでしょうか?

ヨミサーチという検索エンジンに登録者が自由にマークを選択して付けられる機能を付けました。
機能自体は正常に作動していますが、登録画面でチェックボックスが1列になってしまい、マークの数が多いので見栄えが悪いです。
これを3列くらいに配列し直したいのですが、以下の構文のどこに手を加えればいいでしょうか?

↓↓こうなっているものを
□ Win-XP
□ Win-Vista
□ Win-7
□ Win-8
□ Mac-OS
□ Internet Explorer
□ Google Chrome
□ FireFox
□ Opera
□ Safari
□ Office-Word
□ Office-Excel

↓↓こうしたいのです。
□ Win-XP □ Win-Vista □ Win-7
□ Win-8 □ Mac-OS □ Internet Explorer
□ Google Chrome □ FireFox □ Opera
□ Safari □ Office-Word □ Office-Excel

------------------------------------------------
foreach(1 .. $EST{'mcnt'}){ #←マーク数を増やすときは修正
if($FORM{'changer'} ne "admin" && !$EST{'rg_mk'.$_}){
if($mark[$_-1]){print "<input type=hidden name=Fmark$_ value=1>\n";}
next;
}
print "<label><input type=checkbox name=Fmark$_ value=1";
if($mark[$_-1]){print " checked";}
print ">" . $EST{"name_m$_"} . "</label><br>\n";
}
----------------------------------------------------

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/02/07 17:11:06

ベストアンサー

id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154

ぼくなら、こうする。

  • チェックボックスのかたまりをくくるような div をつける(スタイルの指定を限定的にするため)
  • スタイルで、label の幅を指定
  • スタイルで、三つごとに次の行に行くようにする

雰囲気だけですけど、こんな感じ。

# 幅が 20文字くらいで、三つごとに行を変えるような label のスタイル
print << "END_OF_STYLE";
<style type="text/css">
#check_container > label {
	width: 20em;
	display: block;
	float: left;
}
#check_container > label:nth-child(3n+1) {
	clear: both;
}
</style>
END_OF_STYLE

print "<div id=\"check_container\">\n";		# id を指定した、div でくくる

# チェックボックスを書くループは、ほぼそのまま
foreach(1 .. $EST{'mcnt'}){ #←マーク数を増やすときは修正
	...
	print ">" . $EST{"name_m$_"} . "</label>\n";		# <br> をつけない
}

print "</div>\n";


スタイルの解説をしておくと、こんな感じです。

  • check_container という id の子供の label に対して
    • 幅を 20em にする
    • ブロック要素にする(幅の指定が効くように)
    • float を指定して、次の label が下ではなく、右に来るようにする
  • check_container という id の子供の label のうち、三つ単位の先頭のものについて
    • float を解除する(つまり、改行させる)
他3件のコメントを見る
id:pen2648

ありがとうございます。解決しました。
DIVのくくりの位置を間違えていました。m(__)mスミマセン
a-kuma3さんの答えは今回も完璧でした!

2013/02/07 17:09:10
id:a-kuma3

どもども。
perl 苦手なんで、ドキドキしました。

2013/02/07 17:16:44

その他の回答1件)

id:Youshi No.1

回答回数31ベストアンサー獲得回数4

print ">" . $EST{"name_m$_"} . "<br>\n";

print ">" . $EST{"name_m$_"} . "\n";
print "<br>" unless $_ % 3;
とか。

id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ぼくなら、こうする。

  • チェックボックスのかたまりをくくるような div をつける(スタイルの指定を限定的にするため)
  • スタイルで、label の幅を指定
  • スタイルで、三つごとに次の行に行くようにする

雰囲気だけですけど、こんな感じ。

# 幅が 20文字くらいで、三つごとに行を変えるような label のスタイル
print << "END_OF_STYLE";
<style type="text/css">
#check_container > label {
	width: 20em;
	display: block;
	float: left;
}
#check_container > label:nth-child(3n+1) {
	clear: both;
}
</style>
END_OF_STYLE

print "<div id=\"check_container\">\n";		# id を指定した、div でくくる

# チェックボックスを書くループは、ほぼそのまま
foreach(1 .. $EST{'mcnt'}){ #←マーク数を増やすときは修正
	...
	print ">" . $EST{"name_m$_"} . "</label>\n";		# <br> をつけない
}

print "</div>\n";


スタイルの解説をしておくと、こんな感じです。

  • check_container という id の子供の label に対して
    • 幅を 20em にする
    • ブロック要素にする(幅の指定が効くように)
    • float を指定して、次の label が下ではなく、右に来るようにする
  • check_container という id の子供の label のうち、三つ単位の先頭のものについて
    • float を解除する(つまり、改行させる)
他3件のコメントを見る
id:pen2648

ありがとうございます。解決しました。
DIVのくくりの位置を間違えていました。m(__)mスミマセン
a-kuma3さんの答えは今回も完璧でした!

2013/02/07 17:09:10
id:a-kuma3

どもども。
perl 苦手なんで、ドキドキしました。

2013/02/07 17:16:44
  • id:taknt
    最後の
    print ">" . $EST{"name_m$_"} . "</label><br>\n";



    print ">" . $EST{"name_m$_"} . "</label>\n";

    にしたら 一列か。

  • id:Youshi
    こんな丸投げ体質の人にこれ以上付き合えません。
  • id:pen2648
    解らないことを質問して、解っている人が答える
    ここってそういう場所じゃないの?
    解らないならそう言えばいいのに。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません