css - div のラベル レイアウト

Question

<div id="combobox">
    <label><input type="checkbox" id="tag3"
        name="checkbox" onclick="toggleTag('tag3')"/>DialogProc</label><br/>
    <label><input type="checkbox" id="tag2"
        name="checkbox" onclick="toggleTag('tag2')"/>fds</label><br/>
</div>

divチェックボックスとそのラベルのコンテナとして使用しています。私は<br/>別のものの下に配置するために使用しています。<br/>(css)を使わずに同じレイアウトにする方法はありますか?

Answer 1

<p>代わりに要素で区切ることをお勧めします。

<p><label for="tag 3"><input type="checkbox" id="tag3"
        name="checkbox" onclick="toggleTag('tag3')"/>DialogProc</label></p>

<p><label for="tag2"><input type="checkbox" id="tag2"
        name="checkbox" onclick="toggleTag('tag2')"/>fds</label></p>

また、ラベルに for 属性を与えて、複数の理由 (アクセシビリティなど)から入力に関連付けることをお勧めします。たとえば<label for="tag3">、最初のラベルに使用します。<input type="checkbox" id="tag3">

要素の使用によって生じる余白を減らしたい場合は<p>、いくつかの基本的な CSS ルールを要素に適用するだけです。

p {
  margin:0px;
}

---

ここにjsFiddleがあります。

Answer 2

CSS:

#combobox label {
    display:block;
}

<br />次にタグを削除します

Answer 3

//css
#combobox label {
    float: left;
    clear: left;
}