Eşit genişlikte girdi elde etme ve alanları seçme

109

Formda bir seçme ve iki giriş alanım var. Bu öğeler dikey olarak hizalanmıştır. Ne yazık ki, bu elemanların eşit genişliğini elde edemiyorum.

İşte kodum:

<select name="name1" style="width:198px">
  <option>value1</option>
  <option>value2</option>
</select><br/>
<input type="text" name="id1" style="width:193px"><br/>
<input type="text" name="id2" style="width:193px">

Yukarıdaki örnek için, seçilen eleman için en iyi genişlik 198 veya 199 pikseldir (elbette 193 piksel denedim, ancak fark büyüktür). Sanırım, çeşitli bilgisayar ve tarayıcılarda çözünürlüğe bağlı, çünkü bu elemanlar eşit genişliğe sahip değil (bazen farkın yaklaşık 1 veya 2 piksel olduğunu düşünüyorum). Bu öğeleri div veya tablo satırlarında ayarlamaya çalıştım, ancak yardımcı olmadı.

S: Bu elemanların tam olarak eşit genişliğini nasıl elde edebilirim?

— luk4443
kaynak

1

Burada aynı soru soruldu: stackoverflow.com/questions/895904/…

— BlaM

134

Güncellenen cevap

Giriş / textarea / select öğeleri tarafından kullanılan kutu modelini, hepsinin aynı şekilde davranması için nasıl değiştireceğiniz aşağıda açıklanmıştır. box-sizingHer tarayıcı için bir önek ile uygulanan özelliği kullanmanız gerekir

-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box; 
box-sizing:content-box;

Bu, daha önce bahsettiğimiz 2px farkının olmadığı anlamına gelir ..

http://www.jsfiddle.net/gaby/WaxTS/5/ adresinde örnek

not: IE'de sürüm 8'den itibaren çalışır ..

orijinal

Onların reset eğer sınırlarını daha sonra selectöğe her zaman 2'den piksel az olacaktır inputelemanları ..

örnek: http://www.jsfiddle.net/gaby/WaxTS/2/

— Gabriele Petrioli
kaynak

Cevap için teşekkürler. Ve 2px için kenarlık ayarlarsam, giriş ve seçim alanları arasında 3px border - 6px ... için 4 piksel olacaktır.

— luk4443

1

@luk, hayır. Hem giriş hem de seçim aynı kenar genişliğine sahipse, fark 2 pikselde kalacaktır.

— Gabriele Petrioli

Teşekkürler. Kodunuzu çeşitli tarayıcılarda deniyorum ve Firefox'ta her şey yolunda, ancak IE 8 ve Opera'da çalışmıyor (giriş ve seçim genişliği arasında farklılıklar var) :(

— luk4443

1

Belki de kutu boyutunu belirtmek istiyordunuz: border-box? Sanırım demek istediğin bu. İçerik kutusu, dolgu + kenar boşluklarının genişliğe eklendiği varsayılandır.

— O'Rooney

1

Gerçekten şöyle olmalıdır: -ms-box-sizeing: content-box; -moz kutu boyutlandırma: içerik kutu; -webkit kutu boyutlandırma: içerik kutusu; kutu boyutlandırma: içerik kutusu; Standart sözdizimi en son aşamalı geliştirme metodolojisini takip etmelidir, böylece gelecekte standart geniş çapta uygulandığında, kullanıcı aracıları varsayılan olarak standart sözdizimini kullanacak ve önekli sürümleri kaldırabilirsiniz.

— user1739635

118

Gaby'nin yukarıdaki cevabını (+1) denedim ama sorunumu sadece kısmen çözdü. Bunun yerine, içerik kutusunun border-box olarak değiştirildiği aşağıdaki CSS'yi kullandım:

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

— tomsv
kaynak

Evet, öyle görünüyor ki form alanları, örneğin: metin alanı, giriş alanları her zaman kenarlık kutusu kutusu modeliyle iyi çalışıyor. düğme, onay kutusu, radyo, gönderme, sıfırlama ve arama girişi varsayılan olarak kenarlık kutusudur.

— Vennsoh

2

İşte neden kullanmanız gerektiğine dairbox-sizing: border-box iyi bir argüman . İyi bir evrensel uygulama için, üst düzey html öğesini ayarlamayı ve ardından kolayca geçersiz kılınabilmesi için aşağı devralmayı düşünün .

— KyleMit

içerik kutusu benim durumumda hiçbir şey yapmadı. Aynı genişlikte olmaları için border-box'a ihtiyacım vardı. Sınır kutusu kesinlikle daha iyi bir çözüm, teşekkürler.

— Manuel Hoffmann

5

Bu kodu css'e ekleyin:

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }

— 151291
kaynak

-4

başka bir sınıf oluşturun ve 2px örneğiyle boyutu artırın

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

— ionMobDev
kaynak