web-dev-qa-db-fra.com

Quelle est la meilleure façon de styliser une liste de cases à cocher

Ce que j'aimerais réaliser, c'est une mise en page comme celle-ci

 une étiquette [] case à cocher 1 
 [] case à cocher 2 
 [] case à cocher 3 
 [] case à cocher 4

[] représente une case à cocher

Quel balisage et CSS seraient les meilleurs à utiliser pour cela? Je sais que ce serait facile à faire avec une table, je me demande si c'est possible avec des divs

csscheckboxmarkup
22
MarcS

J'utiliserais ce balisage:

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

et ces styles:

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

Les tableaux ne sont pas mauvais, mais ils sont utilisés pour les mauvaises raisons le plus souvent. Ils créent des fichiers html plus gros (mauvais pour les performances et la bande passante), généralement avec une structure html plus encombrée (mauvaise pour la maintenabilité). Quant aux données tabulaires, elles sont excellentes.

29
Magnar

Ce HTML très sémantique:

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

Et ce CSS assez simple:

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

Ajustez les largeurs au besoin.

La bonne façon de le faire est vraiment de remplacer l'élément p dans mon HTML par un élément legend, mais cela ne sera pas stylisé comme vous le souhaitez sans CSS assez moche.

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

À mon avis, c'est plus une sorte de liste qu'un tableau (mais vous n'avez pas énuméré l'image entière). Pour moi, cela ressemble à une liste de définitions, donc je l'utiliserais (sinon je m'en tiendrai à un exemple de liste non ordonnée, la solution Magnar , en ajoutant des étiquettes.

La version de la liste de définitions:

 <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