Lo que me gustaría lograr es un diseño como este
algunas etiquetas [] casilla de verificación 1
[] casilla de verificación 2
[] casilla de verificación 3
[] casilla de verificación 4
[] representa una casilla de verificación
¿Qué marcado y CSS sería mejor usar para esto? Sé que esto sería fácil de hacer con una tabla Me pregunto si esto es posible con 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>
Yo usaría este marcado:
<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>
y estos estilos:
#checkboxes label {
float: left;
}
#checkboxes ul {
margin: 0;
list-style: none;
float: left;
}
Las tablas no son malvadas, pero por lo general se utilizan por las razones equivocadas. Crean archivos html más grandes (malos para el rendimiento y el ancho de banda), generalmente con una estructura html más abarrotada (mala para la mantenibilidad). En cuanto a los datos tabulares, sin embargo, son excelentes.
Este HTML semántico:
<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>
Y este CSS bastante simple:
.checkboxgroup{
width: 20em;
overflow: auto;
}
.checkboxgroup p{
width: 7em;
text-align: right;
}
.checkboxgroup label{
width: 12em;
float: right;
}
Ajuste los anchos según sea necesario.
La forma correcta de hacer esto realmente es reemplazar el pelemento en mi HTML con un legendelemento, pero esto no tendrá el estilo que desees sin un CSS bastante feo.
En mi opinión, es más un tipo de lista que una tabla (pero no enumeró toda la imagen). Para mí, parece una lista de definición, así que la usaría (si no, me quedaría con una lista desordenada, por ejemplo, la solución Magnar , añadiendo etiquetas).
La versión de la lista de definiciones:
<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>