Care este cel mai bun mod de a stiliza o listă de casete de selectare

voturi
21

Ceea ce aș dori să realizeze este un aspect ca aceasta

unele etichete [] checkbox 1
            [] Checkbox 2
            [] Checkbox 3
            [] Checkbox 4

[] Reprezintă o casetă de selectare

Ce marcare și CSS ar fi cel mai bine să utilizați pentru asta? Știu că acest lucru ar fi ușor de a face cu o masă mă întreb dacă acest lucru este posibil cu divuri

Întrebat 04/08/2009 la 21:49
sursa de către utilizator
În alte limbi...                            


4 răspunsuri

voturi
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>
Publicat 04/08/2009 la 21:53
sursa de către utilizator

voturi
25

Mi-ar folosi acest marcaj:

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

și aceste stiluri:

#checkboxes label {
  float: left;
}
#checkboxes ul {
  margin: 0;
  list-style: none;
  float: left;
}

Tabelele nu sunt rele, dar acestea sunt utilizate pentru motive greșite mai des decât nu. Ei fac pentru mai mari html-fișiere (rău pentru performanță și lățime de bandă), de obicei cu o mai aglomerat HTML-structura (rau pentru mentenabilitatea). În ceea ce privește date tabelare cu toate acestea, ele sunt excelente.

Publicat 04/08/2009 la 21:55
sursa de către utilizator

voturi
20

Acest HTML foarte semantic:

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

Și acest lucru destul de simplu CSS:

.checkboxgroup{
    width: 20em;
    overflow: auto;
}
.checkboxgroup p{
    width: 7em;
    text-align: right;
}
.checkboxgroup label{
    width: 12em;
    float: right;
}

Ajustați lățimi după cum este necesar.

Buna mod de a face acest lucru într - adevăr este de a înlocui pelementul în HTML meu cu un legendelement de , dar acest lucru nu va stilul modul în care doriți să fără unele CSS destul de urat.

Publicat 04/08/2009 la 22:07
sursa de către utilizator

voturi
5

În opinia mea sa mai un fel de listă decât un tabel (dar nu ați afișat imaginea de ansamblu). Mie mi se pare ca o listă de definiție , așa că am să - l utilizați (dacă nu aș lipi o listă exemplu neordonata Magnar soluția, adăugarea de etichete.

Versiunea listă definiție:

 <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>
Publicat 04/08/2009 la 22:35
sursa de către utilizator

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