Care este cel mai bun mod de a stiliza o listă de casete de selectare

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

Mi-ar folosi acest marcaj:

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

și aceste stiluri:

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

Tabelele nu sunt rele, dar acestea sunt utilizate pentru motive greșite mai des decât nu. Ei fac pentru mai mari html-fișiere (rău pentru performanță și lățime de bandă), de obicei cu o mai aglomerat HTML-structura (rau pentru mentenabilitatea). În ceea ce privește date tabelare cu toate acestea, ele sunt excelente.

Acest HTML foarte semantic:

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

Și acest lucru destul de simplu CSS:

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

Ajustați lățimi după cum este necesar.

Buna mod de a face acest lucru într - adevăr este de a înlocui pelementul în HTML meu cu un legendelement de , dar acest lucru nu va stilul modul în care doriți să fără unele CSS destul de urat.

În opinia mea sa mai un fel de listă decât un tabel (dar nu ați afișat imaginea de ansamblu). Mie mi se pare ca o listă de definiție , așa că am să - l utilizați (dacă nu aș lipi o listă exemplu neordonata Magnar soluția, adăugarea de etichete.

Versiunea listă definiție:

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