onay kutularını listesini stil en iyi yolu nedir

Question

onay kutularını listesini stil en iyi yolu nedir

oy

21

Ne elde etmek istiyorum böyle bir düzen olduğunu

bazı etiket [] kutusunun 1
            [] Kutusunun 2
            [] Kutusunun 3
            [] Kutusunun 4

[], Bir onay temsil eder

Hangi işaretleme ve CSS bunun için kullanılacak en iyi olurdu? Bu div ile mümkün olup olmadığını bu merak ediyorum bir tablo ile yapmak kolay olurdu biliyorum

css checkbox markup

Oluştur 04/08/2009 saat 21:49
kaynak kullanıcı MarcS

Diğer dillerde...

4 cevaplar

Sean Bright · Answer 1 · 2009-08-04 21:53

oy

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>

Cevap 04/08/2009 saat 21:53
kaynak kullanıcı Sean Bright

Magnar · Answer 2 · 2009-08-04 21:55

Ben şu biçimlendirmeyi kullanırsınız:

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

ve bu stilleri:

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

Tablolar kötü değildir, ancak bunlar çoğu zaman yanlış nedenlerle alıştık. Genellikle (Düzeltilebilirlik için kötü) bir daha karmaşık bir html-yapı ile, (performans ve bant genişliği için kötü) büyük html dosyaları için yapın. Ancak sekmeli veri gelince, onlar mükemmel.

You · Answer 3 · 2009-08-04 22:07

Bu çok semantik 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>

Ve bu oldukça basit CSS:

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

Gerektiğinde genişlikleri ayarlayın.

Gerçekten bunu uygun yolu değiştirmektir pbir ile benim HTML elemanı legendelemanı, ancak bu bazı oldukça çirkin CSS olmadan onu istediğiniz şekilde stil olmayacaktır.

Erv · Answer 4 · 2009-08-04 22:35

Bence bir tablo daha listesinin onun daha çeşit (ama Bütün resmi liste vermedi) olarak. Ben sırasız liste örnek sadık kalacağına değilse ben (kullanmak diye Benim için bir tanım listesi gibi görünüyor Magnar etiketler ekleyerek çözüm.

tanım listesi sürümü:

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