SORU
22 Mayıs 2009, Cuma


HTML - en İyi eşit genişlikte yapmak için yolu seçin giriş ve metin girdi?

Gibi çok basit bir form (görsel amaçlı) var...

<form>

   <div class="input-row">
      <label>Name</label>
      <input type="text" name="name" />
   </div>

   <div class="input-row">
      <label>Country</label>
      <select name="country">
         <option>Australia</option>
         <option>USA</option>
      </select>
   </div>

</form>

Düzen benim yöntem CSS kullanarak şunlar var:

form  {
    width: 500px;
}

form .input-row {
    display: block;
    width: 100%;
    height: auto;
    clear: both; 
    overflow: hidden; /* stretch to contain floated children */
    margin-bottom: 10px;
}

form .input-row label {
    display: block;
    float: left;
}

form .input-row input,
form .input-row select {
    display: block;
    width: 50%;
    float: right;
    padding: 2px;
}

Bu select benim eleman (Firefox zaten) her zaman input benim diğer elemanları aynı genişlikte değil oldukça güzel hizalar. Genellikle birkaç piksel daha dar.

Piksel boyutu (örneğin 200px) genişliğini değiştirmeyi denedim ama bir fark yarattı.

Tüm bunları elde etmek için en iyi yol aynı genişlikte nedir? select'width tek tek s veya tablo içine koyarak... . beni ayar çare yok umarım

CEVAP
22 Mayıs 2009, Cuma


Çözüm form elemanları için kutu modeli ve tarayıcılar border-box kullandığınızda en kabul eğilimindedir:

input, select, textarea {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

normalize.css toplamları bu tür hileler proje var.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ELPRESADOR

    ELPRESADOR

    21 HAZİRAN 2008
  • Jason Parker

    Jason Parker

    14 Aralık 2009
  • YAN TV

    YAN TV

    20 EKİM 2011