Mi a legjobb módja annak, hogy a stílus egy listát a négyzeteket

<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>

Szeretném használni ezt a jelölést:

<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>

és ezek a stílusok:

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

Táblázatok nem rossz, de ők használják a rossz okok miatt gyakrabban, mint nem. Azt, hogy a nagyobb html-fájlok (rossz teljesítmény és a sávszélesség), általában egy zsúfolt html-szerkezet (rossz fenntarthatóság). Ami a táblázatos adatok, ezek azonban kiváló.

Ez nagyon szemantikus 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>

És ez a meglehetősen egyszerű CSS:

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

Állítsa szélességben, ha szükséges.

A megfelelő módja, hogy ezt valóban cserélni az pelemet a HTML-em egy legendelem, de ez nem a stílus, ahogy szeretnéd, hogy anélkül, hogy néhány elég csúnya CSS.

Véleményem a több valamilyen listán, mint egy tábla (de Te nem sorolja a teljes képet). Nekem úgy néz ki, mint egy definíciós lista, így azt használni (ha nem azt ragaszkodni egy rendezetlen lista például a Magnar megoldás, címkék hozzáadásával.

A definíciós lista verzió:

 <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>