css - plugin - plantillas contact form 7

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

Question

Lo que me gustaría lograr es un diseño como este

some label [ ] checkbox 1 [ ] checkbox 2 [ ] checkbox 3 [ ] checkbox 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

Answer 1

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>

Answer 2

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 hacerlo es reemplazar el elemento p en mi HTML con un elemento de legend , pero esto no se ajustará al estilo que desee sin un CSS bastante feo.

Answer 3

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.

Answer 4

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