Как получить равную ширину ввода и выбрать поля

Question

В форме у меня есть одно поле выбора и два поля ввода.Эти элементы выровнены по вертикали.К сожалению, я не могу получить равную ширину этих элементов.

Вот мой код:

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

Для приведенного выше примера лучшая ширина для элемента select равна 198 или 199 px (конечно, я пробовал 193px, но разница существенная).Я думаю, это зависит от разрешения на разных компьютерах и браузерах, поскольку эти элементы не имеют одинаковую ширину (иногда я думаю, что разница составляет около 1 или 2 пикселей).Я пытался установить эти элементы в строках div или таблицы, но это не помогает.

В: Как я могу получить точно равную ширину этих элементов?

Answer 1

Обновленный ответ

Вот как изменить блочную модель, используемую элементами input / textarea / select, чтобы они все вели себя одинаково. Вам необходимо использовать свойство box-sizing, которое реализовано с префиксом для каждого браузера

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

Это означает, что разница в 2px, о которой мы упоминали ранее, не существует ..

пример на http://www.jsfiddle.net/gaby/WaxTS/5/

примечание: В IE он работает с версии 8 и выше ..

---

Оригинал

если вы сбросите их границ , то элемент select всегда будет на 2 пикселя меньше, чем элементы input.

пример: http://www.jsfiddle.net/gaby/WaxTS/2/

Answer 2

Я попробовал ответ Габи (+1) выше, но это только частично решило мою проблему. Вместо этого я использовал следующий CSS, где content-box был изменен на border-box:

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

Answer 3

Добавьте этот код в css:

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

Answer 4

создайте еще один класс и увеличьте его размером с пример 2px

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }