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


109

W formularzu mam jedno pole wyboru i dwa pola wejściowe. Te elementy są wyrównane w pionie. 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">

Dla powyższego przykładu najlepsza szerokość wybranego elementu to 198 lub 199 px (oczywiście próbowałem 193px, ale różnica jest duża). Myślę, że zależy to od rozdzielczości, na różnych komputerach i przeglądarkach, ponieważ te elementy nie mają równych szerokości (czasami wydaje mi się, że różnica wynosi około 1 lub 2 piksele). 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?


1
To samo pytanie zadane tutaj: stackoverflow.com/questions/895904/ ...
BlaM

Odpowiedzi:


134

Zaktualizowana odpowiedź

Oto jak zmienić model pola używany przez elementy input / textarea / select, aby wszystkie zachowywały się w ten sam sposób. Musisz użyć box-sizingwłaściwości, 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 pod adresem http://www.jsfiddle.net/gaby/WaxTS/5/

uwaga: w IE działa od wersji 8 i nowszych.


Oryginalny

jeśli zresetować swoje granice wtedy selectelementem będzie zawsze mniej niż 2 pikseli z inputelementami ..

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


Dzięki za odpowiedź. A jeśli ustawię obramowanie na 2px, to między polami wejściowymi a zaznaczonymi będą 4 piksele, dla obramowania 3px - 6px ...?
luk4443

1
@luk, nie. Jeśli zarówno wejście, jak i zaznaczenie mają tę samą szerokość obramowania, różnica pozostanie do 2 pikseli.
Gabriele Petrioli.

Dzięki. Wypróbowuję twój kod w różnych przeglądarkach iw Firefoksie wszystko jest w porządku, ale nie działa w IE 8 i Operze (są różnice między wprowadzaniem a
wyborem

1
Być może chciałeś określić rozmiar pudełka: border-box? Myślę, że to miałeś na myśli. Pole zawartości jest ustawieniem domyślnym, gdzie dopełnienie + marginesy dodają do szerokości.
O'Rooney

1
Naprawdę powinno być: -ms-box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; Standardowa składnia powinna być ostatnia, aby postępować zgodnie z metodologią stopniowego ulepszania, tak aby w przyszłości, gdy standard zostanie powszechnie wdrożony, programy użytkownika będą domyślnie używać standardowej składni i można będzie usunąć wersje z prefiksami.
user1739635

118

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

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

Tak, wygląda na to, że pola formularzy, np. Pole tekstowe, pola wejściowe, zawsze działają dobrze z modelem ramki granicznej. przycisk, pole wyboru, radio, przesyłanie, resetowanie i wprowadzanie wyszukiwania są domyślnie ramkami.
Vennsoh

2
Oto dobry argument, dlaczego powinieneś używaćbox-sizing: border-box . Aby uzyskać dobrą uniwersalną implementację, rozważ ustawienie elementu HTML najwyższego poziomu, a następnie dziedziczenie w dół, aby można go było łatwo zastąpić.
KyleMit

content-box nic nie zrobił w moim przypadku. Potrzebowałem ramki granicznej, aby miały tę samą szerokość. Border-box to zdecydowanie lepsze rozwiązanie, dzięki.
Manuel Hoffmann

5

Dodaj ten kod w css:

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

-4

utwórz kolejną klasę i powiększ rozmiar o przykład 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.