Ποιος είναι ο καλύτερος τρόπος για να το ύφος μια λίστα των πλαισίων ελέγχου

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

Θα χρησιμοποιήσετε αυτήν τη σήμανση:

<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 (κακό για συντηρησιμότητα). Όσο για πίνακα δεδομένων, ωστόσο, είναι εξαιρετική.

Αυτή η πολύ σημασιολογική 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.

Κατά τη γνώμη μου, του πιο κάποιο είδος της λίστας από έναν πίνακα (αλλά δεν λίστα ολόκληρη την εικόνα). Για μένα μοιάζει με έναν κατάλογο ορισμό γι 'αυτό θα το χρησιμοποιήσει (αν δεν μπορώ να επιμείνουμε σε μια μη διατεταγμένη λίστα παράδειγμα το 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>