26

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

いくつかのラベル [ ] チェックボックス 1
            [ ] チェックボックス 2
            [ ] チェックボックス 3
            [ ] チェックボックス 4

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

これには、どのマークアップと CSS を使用するのが最適でしょうか? これはテーブルで簡単にできることを知っています。これがdivで可能かどうか疑問に思っています

4

4 に答える 4

36

このマークアップを使用します。

<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 構造 (保守性に悪い) を持ちます。ただし、表形式のデータに関しては、優れています。

于 2009-08-04T20:55:05.057 に答える
28

この非常にセマンティックな 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;
}

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

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

于 2009-08-04T21:07:00.400 に答える
6

私の意見では、表というよりはある種のリストです (しかし、あなたは全体像をリストしていませんでした)。私には定義リストのように見えるので、それを使用します (そうでない場合は、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>
于 2009-08-04T21:35:31.310 に答える
5 
<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>
于 2009-08-04T20:53:57.947 に答える