¿Cuál es la mejor manera de diseñar una lista de casillas de verificación?

votos
21

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

Publicado el 04/08/2009 a las 21:49
fuente por usuario
En otros idiomas...                            


4 respuestas

votos
5
<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>
Respondida el 04/08/2009 a las 21:53
fuente por usuario

votos
25

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.

Respondida el 04/08/2009 a las 21:55
fuente por usuario

votos
20

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.

Respondida el 04/08/2009 a las 22:07
fuente por usuario

votos
5

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>
Respondida el 04/08/2009 a las 22:35
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more