Was ich möchte, ist ein Layout, wie dies zu erreichen,
einige Label [] Checkbox 1
[] Checkbox 2
[] Ankreuzfeld 3
[] Ankreuzfeld 4
[] Stellt eine Checkbox
Welche Markup und CSS wäre am besten für diesen Einsatz? Ich weiß, das wäre leicht, mit einem Tisch zu tun, ich frage mich, ob dies mit div-Tags möglich ist
<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>
Ich würde diesen Markup verwenden:
<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>
und diese Stile:
#checkboxes label {
float: left;
}
#checkboxes ul {
margin: 0;
list-style: none;
float: left;
}
Die Tische sind nicht böse, aber sie sind aus den falschen Gründen häufiger als nicht verwendet. Sie machen für größere html-Dateien (schlecht für die Leistung und Bandbreite), in der Regel mit einer unübersichtlich HTML-Struktur (schlecht für die Wartbarkeit). Wie für tabellarische Daten jedoch sind sie hervorragend.
Diese sehr 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>
Und das ziemlich einfache CSS:
.checkboxgroup{
width: 20em;
overflow: auto;
}
.checkboxgroup p{
width: 7em;
text-align: right;
}
.checkboxgroup label{
width: 12em;
float: right;
}
Passen Breiten nach Bedarf.
Der richtige Weg , dies wirklich zu tun ist , um die ersetzen pElement in meinem HTML mit einem legendElemente, aber das wird so , wie Sie es nicht Stil wollen , ohne ein paar ziemlich hässlich CSS.
Meiner Meinung nach seinem mehr eine Art von Liste als eine Tabelle (aber Sie haben nicht das ganze Bild Liste). Für mich sieht es wie eine Definitionsliste , damit ich es verwenden würde (wenn ich mich nicht auf eine ungeordnete Liste Beispiel die haften bleiben würde Magnar Lösung, Hinzufügen von Etiketten.
Die Definitionsliste Version:
<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>