浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【html5】ラジオボタンをどのデバイスでも一列に表示させる方法

今回は、inputタグでradioボタンを複数使う時に縦に表示されてしまうradioボタンを、一列に表示させる方法についてお話させて

いただきます。

早速ですが、radioボタンを隣接させるのに一番早い方法は、idとforを使用することです。

forは一般的にコーディングで使用するfor文とは関係ないです。


 <<span class="pl-ent">input</span> type="radio" name="radio02" class="<span class="pl-ent">radio02-input</span>" id="<span class="pl-ent">radio02-01</span>"<span class="pl-k">></span>
 <<span class="pl-ent">label</span> for="<span class="pl-ent">radio02-01</span>"<span class="pl-k">></span>ラジオ01</<span class="pl-ent">label</span><span class="pl-k">></span>

chromeでは無事に表示させることができました。

もしかしたらfirefoxやIEだと違う挙動になってしまうかもしれないですが、chromeAPPでアプリを作る際は

この方法を使っても問題ないと思います。
 

  • この記事いいね! (0)