Was ist der beste Weg, um eine Liste von Kontrollkästchen, um Stil

stimmen
21

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

Veröffentlicht am 04/08/2009 um 21:49
quelle vom benutzer
In anderen Sprachen...                            


4 antworten

stimmen
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>
Beantwortet am 04/08/2009 um 21:53
quelle vom benutzer

stimmen
25

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.

Beantwortet am 04/08/2009 um 21:55
quelle vom benutzer

stimmen
20

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.

Beantwortet am 04/08/2009 um 22:07
quelle vom benutzer

stimmen
5

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>
Beantwortet am 04/08/2009 um 22:35
quelle vom benutzer

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