Quello che mi piacerebbe realizzare è un layout come questo
qualche etichetta [] casella 1
[] Casella 2
[] Casella di controllo 3
[] Casella di controllo 4
[] Rappresenta una casella
Che markup e CSS sarebbe meglio utilizzare per questo? So che questo sarebbe stato facile da fare con un tavolo Mi chiedo se questo è possibile con div
<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>
Vorrei usare questo markup:
<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>
e questi stili:
#checkboxes label {
float: left;
}
#checkboxes ul {
margin: 0;
list-style: none;
float: left;
}
I tavoli non sono male, ma sono utilizzati per le ragioni sbagliate il più delle volte. Fanno per grandi html-files (male per le prestazioni e la larghezza di banda), di solito con un più ingombra html-struttura (male per manutenzione). Per quanto riguarda i dati tabulari tuttavia, sono eccellenti.
Questo molto semantica 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>
E questa abbastanza semplice CSS:
.checkboxgroup{
width: 20em;
overflow: auto;
}
.checkboxgroup p{
width: 7em;
text-align: right;
}
.checkboxgroup label{
width: 12em;
float: right;
}
Regolare larghezze come necessario.
Il modo corretto per farlo veramente è quello di sostituire l' pelemento nel mio HTML con un legendelemento, ma questo non lo stile il modo in cui si vuole che, senza alcuni piuttosto brutto CSS.
A mio parere la sua più una sorta di lista di un tavolo (ma Tu non hai elencato l'intero quadro). A me sembra un elenco di definizioni in modo avrei usato (se non vorrei bastone ad un esempio lista non ordinata la Magnar soluzione, l'aggiunta di etichette.
La versione lista di definizioni:
<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>