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

92

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

Здесь мой код:

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

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

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

Теги:
html-select
border-box

4 ответа

115
Лучший ответ

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

Вот как изменить модель окна, используемую элементами ввода /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/

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

Оригинал

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

example: http://www.jsfiddle.net/gaby/WaxTS/2/

Поделиться
  • 0
    Спасибо за ответ. И если я установлю границу для 2px, между полями ввода и выбора будет 4 пикселя, для границы 3px - 6px ...?
  • 1
    @luk Лук, нет. Если оба параметра input и select имеют одинаковую ширину границы, разница останется равной 2 пикселям.
Показать ещё 15 комментариев
93

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

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
Поделиться
Показать ещё 3 комментария
3

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

 select, input[type="text"]{
      width:100%;
      box-sizing:border-box;
    }
Поделиться
-3

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

.enquiry_fld_normal{
width:278px !important; 
}

.enquiry_fld_normal_select{
width:280px !important; 
 }
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню