html チェックボックスを間隔あけて

<td>
 <span class="check">
  <input type="checkbox" id="aaa" value="1">Aチェックボックス
  <input type="checkbox" id="bbb" value="1"> Bチェックボックス
 </span>
</td>

同じtd内に複数のチェックボックスを用意したいのですが、上記のような記述だと
□Aチェックボックス□Bチェックボックスとなってしまいます。
これは間隔をあけて表示させたいのですが可能でしょうか？？
□Aチェックボックス □Bチェックボックス

また、
□Aチェックボックス
□Bチェックボックス
のように改行させた形で表示させることもできるなら教えていただきたいです。

行動規範の内容に同意します

回答5件

一例ですが。

css
1.checkbox_horizon + .checkbox_horizon {
2	margin-left: 20px;
3}
4.checkbox_vertical {
5	display: block;
6}

html
1<!-- 横並び -->
2<div>
3 <span class="check">
4  <label class="checkbox_horizon"><input type="checkbox" id="aaa" value="1">Aチェックボックス</label>
5  <label class="checkbox_horizon"><input type="checkbox" id="bbb" value="1">Bチェックボックス</label>
6 </span>
7</div>
8
9<!-- 縦並び -->
10<div>
11 <span class="check">
12  <label class="checkbox_vertical"><input type="checkbox" id="aaa" value="1">Aチェックボックス</label>
13  <label class="checkbox_vertical"><input type="checkbox" id="bbb" value="1">Bチェックボックス</label>
14 </span>
15</div>

投稿2016/11/10 07:31

gin

総合スコア2722

CSSをつかわずにやるなら

html
1<td>
2 <span class="check">
3  <input type="checkbox" id="aaa" value="1">Aチェックボックス&nbsp;&nbsp;
4  <input type="checkbox" id="bbb" value="1"> Bチェックボックス
5 </span>
6</td>

html
1<td>
2 <span class="check">
3  <input type="checkbox" id="aaa" value="1">Aチェックボックス<br>
4  <input type="checkbox" id="bbb" value="1"> Bチェックボックス
5 </span>
6</td>

でしょうか。

投稿2016/11/10 07:29

hana-da

総合スコア1728

間隔を開ける
（空白のHTML特殊文字）や全角スペースなどを使う
改行
通常の<br />で改行されます。

他にもCSSを使ってピクセル単位などで間隔を指定できます。

投稿2016/11/10 07:30

mrx

総合スコア54

ベストアンサー

普通に考えれば最初のcheckbox以外にcssを適用すればいいのでは？

CSS
1span.check input[type="checkbox"]:not(:first-child){ margin-left:100px;}

改行についてはあまりお勧めしませんがpreで処理

CSS
1span.check { white-space: pre ;}

投稿2016/11/10 07:44

yambejp

総合スコア117667

間隔を開けたい→CSSでmarginを設定
改行させたい→<br>でいいと思いますが、ラベルがほぼ固定なら下記例のように枠のサイズを指定する形でもよいかと

HTML
1<style type="text/css">
2.ib {
3    margin-left: 30px;
4}
5.check {
6    width: 180px;
7}
8</style>
9<td>
10 <div class="check">
11  <input type="checkbox" id="aaa" value="1" class="ib">Aチェックボックス
12  <input type="checkbox" id="bbb" value="1" class="ib">Bチェックボックス
13  <input type="checkbox" id="aaa" value="1" class="ib">Aチェックボックス
14  <input type="checkbox" id="bbb" value="1" class="ib">Bチェックボックス
15  <input type="checkbox" id="aaa" value="1" class="ib">Aチェックボックス
16  <input type="checkbox" id="bbb" value="1" class="ib">Bチェックボックス
17  <input type="checkbox" id="aaa" value="1" class="ib">Aチェックボックス
18  <input type="checkbox" id="bbb" value="1" class="ib">Bチェックボックス
19  <input type="checkbox" id="aaa" value="1" class="ib">Aチェックボックス
20  <input type="checkbox" id="bbb" value="1" class="ib">Bチェックボックス
21 </div>
22</td>