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

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 или таблицы, но это не помогает.

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

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

Сначала установите одинаковую ширину каждого элемента, в вашем случае ширину 193 пикселей или 198 пикселей. Тогда вы можете подписаться на одну из них ниже.

а. добавить эту строку box-sizing: border-box;в том стиле, который вы выбираете и вводите. как style="width:198px; box-sizing: border-box;"

или же

б. добавьте эти строки в свой CSS (внешний на внутренний CSS, какой бы вы ни использовали).

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

Answer 5

В разделе css вам нужно просто добавить «box-sizing: content-box;». У меня была такая же проблема, и я мог решить ее таким образом.

Answer 6

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

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }