W formularzu mam jedno pole wyboru i dwa pola wprowadzania. Te elementy są wyrównane w pionie. Niestety nie mogę uzyskać równej szerokości tych elementów.
<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ść dla wybranego elementu wynosi 198 lub 199 pikseli (oczywiście próbowałem 193 pikseli, ale różnica jest znacząca). 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 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. Jak mogę uzyskać dokładnie taką samą szerokość tych elementów?
1 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ć właściwości zmiany rozmiaru box, która jest implementowana 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.