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

Oluştur 04/08/2009 saat 21:49
kaynak kullanıcı
Diğer dillerde...                            


4 cevaplar

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ı

oy
25

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.

Cevap 04/08/2009 saat 21:55
kaynak kullanıcı

oy
20

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.

Cevap 04/08/2009 saat 22:07
kaynak kullanıcı

oy
5

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>
Cevap 04/08/2009 saat 22:35
kaynak kullanıcı

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