web-dev-qa-db-ja.com

チェックボックスのリストをスタイルする最良の方法は何ですか

私が達成したいのは、このようなレイアウトです

一部のラベル[]チェックボックス1 
 []チェックボックス2 
 []チェックボックス3 
 []チェックボックス4

[]チェックボックスを表します

これにはどのマークアップとCSSが最適でしょうか？これはテーブルで簡単にできることはわかっています

csscheckboxmarkup
22
MarcS

私はこのマークアップを使用します：

<div id="checkboxes">
  <label>some label</label>
  <ul>
    <li><input type="checkbox"> checkbox 1</li>
    <li><input type="checkbox"> checkbox 2</li>
    <li><input type="checkbox"> checkbox 3</li>
    <li><input type="checkbox"> checkbox 4</li>
  </ul>
</div>

そしてこれらのスタイル：

#checkboxes label {
  float: left;
}
#checkboxes ul {
  margin: 0;
  list-style: none;
  float: left;
}

テーブルは悪ではありませんが、間違った理由で使用されることが多いです。それらはより大きなhtmlファイル（パフォーマンスと帯域幅に悪い）を作ります。通常、より乱雑なhtml構造（保守性に悪い）を伴います。ただし、表形式のデータは優れています。

29
Magnar

この非常にセマンティックなHTML：

<fieldset class="checkboxgroup">
    <p>some label</p>
    <label><input type="checkbox"> checkbox 1</label>
    <label><input type="checkbox"> checkbox 2</label>
    <label><input type="checkbox"> checkbox 3</label>
    <label><input type="checkbox"> checkbox 4</label>
</fieldset>

そして、このかなり単純なCSS：

.checkboxgroup{
    width: 20em;
    overflow: auto;
}
.checkboxgroup p{
    width: 7em;
    text-align: right;
}
.checkboxgroup label{
    width: 12em;
    float: right;
}

必要に応じて幅を調整します。

これを行う適切な方法は、実際にはHTMLのp要素をlegend要素に置き換えることですが、これは、かなり醜いCSSを使用しないと、意図したとおりにスタイルを設定できません。

22
You
<div style="float: left;">
    some label
</div>

<div style="float: left;">
    <input type="checkbox" />&#160;checkbox 1<br />
    <input type="checkbox" />&#160;checkbox 2<br />
    <input type="checkbox" />&#160;checkbox 3<br />
    <input type="checkbox" />&#160;checkbox 4
</div>
5
Sean Bright

私の意見では、それは表よりも一種のリストです（しかし、あなたは全体像をリストしませんでした）。私には定義リストのように見えるので、それを使用します（そうでない場合は、順不同リストの例 Magnar ソリューションに固執し、ラベルを追加します）。

定義リストのバージョン：

 <dl id="checkboxes">
        <dt>same label or term</dt>
        <dd><input type="checkbox" id="chk1" /><label for="chk1">checkbox 1</label></dd>
        <dd><input type="checkbox" id="chk2" /><label for="chk2">checkbox 2</label></dd>
        <dd><input type="checkbox" id="chk3" /><label for="chk3">checkbox 3</label></dd>
        <dd><input type="checkbox" id="chk4" /><label for="chk4">checkbox 4</label></dd>
  </dl>
5
Erv