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

  • 2019年1月25日
  • HTML

今回は、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でアプリを作る際は

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

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG