Q&A
「○イギリス」のボックスの大きさを揃えたいのですか？それともイギリスの「ス」から次のラジオボタン「○」までの間隔をそろえたいのですか？
laravel5で画面を作成したのですが、ラジオボタンの間隔を調整したいです。
bootstrapで出来ますか？それともCSSで調整した方がよろしいですか？
CSSでやるにしてもどのようなタグを使ったらよいかがわかりません。
このままだと下のように隣同士でくっついてしまうので、ラジオボタンの間隔を等間隔でもっと間を空けるように調整したいです。
○ イギリス ○ フランス ○ ドイツ
○ イタリア ○ オーストリア
lang
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <!-- CSSを追加 --><!-- ① 追加 --> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 7 <title>Document</title> 8</head> 9<body> 10 11 <h1>テスト</h1> 12 <p> 13 <select name="example"> 14 <option>選択肢のサンプル1</option> 15 <option>選択肢のサンプル2</option> 16 <option>選択肢のサンプル3</option> 17 <option>選択肢のサンプル4</option> 18 <option>選択肢のサンプル5</option> 19 </select> 20 </p> 21 22 23 <input name="parser" type="radio" value ='イギリス' >イギリス</label> 24 25 <input name="scraper" type="radio" value ='フランス' checked="checked">フランス</label> 26 <input name="annotator" type="radio" value ='ドイツ'>ドイツ</label><br> 27 <input name="rule" type="radio" value ='イタリア'>イタリア</label>< 28 <input name="page_list" type="radio" value ='オーストリア'>オーストリア</label><input type="submit" value = '表示'><br> 29<br> 30<!-- Scripts --><!-- ③ 追加 --> 31 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 32 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 33 @yield('content'); 34</body> 35</html>
回答2件
0
ではせっかくなので。
リストでまとめたほうがいいとかいろいろ意見あると思いますが、とりあえず質問のhtmlのままで。
html
1<!-- labelの開始タグがないので追加 --> 2<input id="en" name="parser" type="radio" value ='イギリス' ><label for="en">イギリス</label> 3 4<!-- labelでinputごとかこったパターン --> 5<label for="fr"><input id="fr" name="parser" type="radio" value ='フランス' >フランス</label>
css
1/* labelとradioボタン or labelが隣り合ってる場合にradio or labelの左に余白を付ける */ 2label + input[type="radio"], 3label + label { 4 margin-left: 8em; 5}
投稿2016/10/06 07:28
総合スコア2722
0
自己解決
これでひとまず解決できました。フロント側はやったことがなかったので焦りました。
<span style="margin-right: 8em;"></span>
投稿2016/10/06 07:08
総合スコア66
あなたの回答
tips
プレビュー
