Jak uzyskać równą szerokość wejścia i wybrać pola

W formularzu mam jedno pole select I dwa pola input. Elementy te są wyrównane pionowo. Niestety nie mogę uzyskać jednakowej szerokości tych elementów.

Oto Mój kod: 

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

W powyższym przykładzie najlepsza Szerokość elementu select to 198 lub 199 px(oczywiście próbowałem 193px, ale różnica jest duża). Myślę, że to zależy od rozdzielczości, na różnych komputerach i przeglądarkach, ponieważ te elementy nie mają jednakowych szerokości (czasami myślę, że różnica wynosi około 1 lub 2 px). Próbowałem ustawić te elementy w wierszach div lub tabeli, ale to nie pomaga.

P: Jak mogę uzyskać dokładnie taką samą szerokość tych elementów?

Author: KyleMit, 2010-11-02
Source

4 answers

Zaktualizowana ODPOWIEDŹ

Oto jak zmienić model pudełkowy używany przez elementy input/textarea/select tak, aby wszystkie zachowywały się tak samo. Musisz użyć właściwości box-sizing, która jest zaimplementowana z prefiksem dla każdej przeglądarki 

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

Oznacza to, że wspomniana wcześniej różnica 2px nie istnieje..

Przykład na http://www.jsfiddle.net/gaby/WaxTS/5/

Uwaga: na IE działa od wersji 8 i / align = "left" / .

Oryginalny

Jeśli zresetujesz ich obramowanie wtedy element select będzie zawsze o 2 piksele mniejszy od elementów input..

Przykład: http://www.jsfiddle.net/gaby/WaxTS/2/

 122
Author: Gabriele Petrioli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-02 16:11:03

Próbowałem odpowiedzi Gaby (+1) powyżej, ale to tylko częściowo rozwiązało mój problem. Zamiast tego użyłem następującego CSS, gdzie content-box został zmieniony na border-box: 

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
 103
Author: tomsv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-18 20:54:57

Dodaj ten kod w css: 

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }
 4
Author: 151291,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-22 09:29:48

Utwórz kolejną klasę i zwiększ rozmiar z 2px przykład 

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }
 -3
Author: ionDev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-07 11:03:48