Wat ik zou willen bereiken is een lay-out als deze
sommige label [] checkbox 1
[] Aan 2
[] Aan 3
[] Aan 4
[] Staat voor een selectievakje
Wat markup en CSS zou het beste zijn om te gebruiken voor dit? Ik weet dat dit makkelijk te doen met een tafel Ik vraag me af zou zijn als dit mogelijk is met 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>
Ik zou dit markup te gebruiken:
<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>
en deze stijlen:
#checkboxes label {
float: left;
}
#checkboxes ul {
margin: 0;
list-style: none;
float: left;
}
Tafels zijn niet slecht, maar ze worden gebruikt om de verkeerde redenen vaker wel dan niet. Ze maken voor grotere html-bestanden (slecht voor de prestaties en bandbreedte), meestal met een meer rommelig html-structuur (slecht voor onderhoudbaarheid). Zoals voor gegevens in tabelvorm maar ze zijn uitstekend.
Deze zeer semantische 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>
En dit vrij eenvoudig CSS:
.checkboxgroup{
width: 20em;
overflow: auto;
}
.checkboxgroup p{
width: 7em;
text-align: right;
}
.checkboxgroup label{
width: 12em;
float: right;
}
Pas de breedte als dat nodig is.
De juiste manier om dit echt te doen is om het te vervangen pelement in mijn HTML met een legendelement, maar dit zal niet de stijl van de manier waarop u dat wilt, zonder een aantal mooie lelijke CSS.
Naar mijn mening zijn meer een soort lijst dan een tafel (maar je hebt niet het hele plaatje lijst). Voor mij lijkt het een definitie lijst, zodat ik het zou gebruiken (als ik niet zou houden aan een ongeordende lijst bijvoorbeeld de Magnar oplossing, het toevoegen van labels.
De definitie lijst versie:
<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>