Cara mendapatkan lebar input dan bidang pilih yang sama

109

Pada formulir, saya memiliki satu pilih dan dua bidang masukan. Elemen-elemen ini disejajarkan secara vertikal. Sayangnya, saya tidak bisa mendapatkan lebar yang sama dari elemen-elemen ini.

Ini kode saya:

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

Untuk contoh di atas, lebar terbaik untuk elemen pilih adalah 198 atau 199 px (tentu saja saya mencoba 193px, tetapi perbedaannya besar). Menurut saya, ini tergantung pada resolusi, di berbagai komputer dan browser karena elemen ini tidak memiliki lebar yang sama (terkadang menurut saya perbedaannya sekitar 1 atau 2 px). Saya sudah mencoba mengatur elemen-elemen ini dalam baris div atau tabel, tetapi itu tidak membantu.

T: Bagaimana saya bisa mendapatkan lebar yang sama dari elemen-elemen ini?

— luk4443
sumber

1

Pertanyaan yang sama ditanyakan di sini: stackoverflow.com/questions/895904/…

— BlaM

134

Jawaban yang diperbarui

Berikut adalah cara mengubah model kotak yang digunakan oleh elemen input / textarea / pilih agar semuanya berperilaku sama. Anda perlu menggunakan box-sizingproperti yang diimplementasikan dengan awalan untuk setiap browser

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

Ini berarti perbedaan 2px yang kami sebutkan sebelumnya tidak ada ..

contoh di http://www.jsfiddle.net/gaby/WaxTS/5/

catatan: Di IE berfungsi dari versi 8 dan yang lebih baru ..

Asli

jika Anda mengatur ulang batasnya maka selectelemen akan selalu kurang dari 2 piksel dari inputelemen ..

contoh: http://www.jsfiddle.net/gaby/WaxTS/2/

— Gabriele Petrioli
sumber

Terima kasih atas balasannya. Dan jika saya mengatur border untuk 2px, akan ada 4 pixel antara input dan field yang dipilih, untuk 3px border - 6px ...?

— Lukas4443

1

@luk, tidak. Jika kedua input dan pilih memiliki lebar batas yang sama maka perbedaannya akan tetap menjadi 2 piksel ..

— Gabriele Petrioli

Terima kasih. Saya mencoba kode Anda di berbagai browser dan di Firefox semuanya baik-baik saja, tetapi tidak berfungsi di IE 8 dan Opera (ada perbedaan antara masukan dan lebar pilihan) :(

— luk4443

1

Mungkin Anda bermaksud menentukan ukuran kotak: batas-kotak? Saya pikir itu yang Anda maksud. Content-box adalah default di mana padding + margin ditambahkan ke lebar.

— O'Rooney

1

Seharusnya: -ms-box-sizing: content-box; -moz-kotak-ukuran: kotak-konten; -webkit-box-sizing: content-box; ukuran kotak: kotak konten; Sintaks standar harus menjadi yang terakhir untuk mengikuti metodologi peningkatan progresif sehingga di masa depan ketika standar diterapkan secara luas, agen pengguna akan menggunakan sintaks standar secara default dan Anda dapat menghapus versi yang diawali.

— pengguna1739635

118

Saya mencoba jawaban Gaby (+1) di atas tetapi itu hanya menyelesaikan sebagian masalah saya. Sebagai gantinya saya menggunakan CSS berikut, di mana content-box diubah menjadi border-box:

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

— tomsv
sumber

Yup, tampaknya kolom formulir misalnya: textarea, kolom input selalu berfungsi dengan baik dengan model kotak batas. tombol, kotak centang, radio, kirim, setel ulang, dan masukan pencarian adalah kotak batas secara default.

— Vennsoh

2

Inilah argumen yangbox-sizing: border-box bagus mengapa Anda harus menggunakan . Untuk penerapan universal yang baik, pertimbangkan untuk menyetel elemen html tingkat atas lalu mewarisi agar dapat dengan mudah diganti.

— KyleMit

content-box tidak melakukan apa pun dalam kasus saya. Saya membutuhkan border-box agar mereka memiliki lebar yang sama. Border-box jelas merupakan solusi yang lebih baik, terima kasih.

— Manuel Hoffmann

5

Tambahkan kode ini di css:

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

— 151291
sumber

-4

buat kelas lain dan tingkatkan dengan ukuran dengan contoh 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }

— ionMobDev
sumber