人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

(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";
}
----------------------------------------------------

●質問者: raiden
●カテゴリ:コンピュータ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Youshi

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

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


2 ● a-kuma3
ベストアンサー

ぼくなら、こうする。

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

# 幅が 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";


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


raidenさんのコメント
a-kuma3さん 前回は折りたたみのスプリクトで素晴らしい技術を教えて下さって本当にありがとうございました。 今回も見てくれてありがとうございます。 早速、頂いたもので試してみました。 するとチェックボックスはそろった状態になりました。 頭が揃うとやっぱりすごく見やすいです。 ただ次の項目の説明文が一番右にボックス状に固まりになってます。 次の列というかボックスが3つ右に並んでいる感じです。 ここでは空白スペースがうまく表現できないので説明が難しいですが ----------こんな感じになりました--------- 3.【マーク】 ※関係が深いマークを選択してください(複数可) (A)(B)(C) ------------------------------- (A) □ Win-XP □ Win-7 □ Mac-OS □ Google Chrome □ Opera □ Office-Excel (B) □ Win-Vista □ Win-8 □ Internet Explorer □ FireFox □ Safari □ Office-Word (C) 次の4番目の項目の 説明文が一番右の BOXにこんな感じで 出てきました。

raidenさんのコメント
width: 20em; を10emにしてみたところ5×3列になりました。 次の項目の説明文はやはりその最後に巻き込まれている感じになっています。 数字を変えると、巻き込まれる説明文の文字数も変わります。 チェックボックスの項目で完全に切り離すことが出来れば良さそうだと思い、次の項目の前に<br>を付けてみましたが駄目でした。

raidenさんのコメント
すみません改行されて消えてしまいました。<BR>びーあるです。

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

a-kuma3さんのコメント
どもども。 perl 苦手なんで、ドキドキしました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ