Ce que je voudrais réaliser est une mise en page comme celui-ci
une étiquette [] case à cocher 1
[] Case 2
[] Case 3
[] Case 4
[] Représente une case à cocher
Qu'est-ce que le balisage et CSS serait préférable d'utiliser pour cela? Je sais que ce serait facile à faire avec une table, je me demande si cela est possible avec divs
<div style="float: left;">
some label
</div>
<div style="float: left;">
<input type="checkbox" /> checkbox 1<br />
<input type="checkbox" /> checkbox 2<br />
<input type="checkbox" /> checkbox 3<br />
<input type="checkbox" /> checkbox 4
</div>
Je voudrais utiliser 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 mal, mais ils sont utilisés pour les mauvaises raisons plus souvent qu'autrement. Ils font pour de plus grands fichiers HTML (mauvais pour la performance et la bande passante), généralement avec une structure HTML plus encombrées (mauvais pour maintenabilité). En ce qui concerne les données sous forme de tableau cependant, ils sont excellents.
Ce code 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;
}
Régler la largeur selon les besoins.
La bonne façon de le faire est vraiment remplacer l' pélément dans mon code HTML avec un legendélément, mais ce ne sera pas le style de la façon dont vous le souhaitez sans un CSS assez laid.
À mon avis son plus une sorte de liste d'une table (mais vous n'avez pas la liste toute l'image). Pour moi , il ressemble à une liste de définitions , donc je voudrais l' utiliser (sinon je tiendrais à une liste non ordonnée par exemple la Magnar solution, l' ajout d' étiquettes.
La version de la liste de définition:
<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>