Как я могу выровнять высоту полей ввода текста? - PullRequest
Новая
       19

Как я могу выровнять высоту полей ввода текста?

19 голосов
/ 15 апреля 2010

Каков наилучший способ выровнять высоту моих <select..> элементов и моих <input type="text"..> элементов? Это оказывается трудным из-за различий в моделях размеров коробок.

Таблица стилей пользовательского агента Google Chrome имеет следующее: 

select { -webkit-box-sizing: border-box; }

.. тогда как другие поля ввода текста используют модель блоков содержимого. Почему разница? Должен ли я сделать так, чтобы во всех моих текстовых полях ввода использовалась модель рамки?

Кстати, я использую режим, соответствующий стандартам (используя <!DOCTYPE html>).

Ответы [ 5 ]

3 голосов
/ 17 апреля 2010

Да .. это чрезвычайно сложно.
Не забывайте, что есть проблемы с Firefox, по-разному относящиеся к элементам формы. манипулирование кросс-браузерной формой в лучшем случае невозможно. : D

Некоторые вещи на заметку. line-height не может использоваться на всех элементах .. т.е. Firefox жестко кодирует высоту строки для ввода элементов [type = text].

У меня есть статья об использовании inline-block и вертикального выравнивания, что может помочь некоторым .. (используйте verital-align: baseline;) Радости встроенного блока на screwlewse.com

Также имейте в виду, что во многих новых браузерах этот хром добавлен, чтобы входные формы выглядели более как ОС. (но это выглядит как другая проблема)

2 голосов
/ 14 ноября 2010

Как насчет? 

select {padding: 1px;}
1 голос
/ 06 сентября 2012

Да, вы должны использовать make, чтобы все "текстовые поля ввода использовали модель рамки".

На этот вопрос уже был дан ответ в нескольких других SO-вопросах, , таких как здесь .

Тот факт, что WhatWG / W3c принял текущую модель рамки, достаточно странен.
То, что они не сделали это последовательно, еще более странно.

Нет ничего плохого в том, чтобы перезаписать значения по умолчанию для создания согласованного дизайна.
Не существует другого надежного или правильного решения.

1 голос
/ 16 апреля 2010

Не могли бы вы просто установить высоту всех входных данных и выбрать поля для определенной высоты пикселя с помощью CSS? Если он не «выглядит» как одна и та же высота из-за границ, удалите границы или установите их все одинаково одинаково. Например: 

<html>
  <body>
    <input type=text style="border: 1px solid black; height: 37px;">&nbsp;
    <select style="border: 1px solid black; height: 37px; line-height: 37px; font-size: 28px;"></select>&nbsp;
    <input type=button style="border: 1px solid black; height: 37px;">
  </body>
</html>

Это делает все три поля формы высотой 37 пикселей. Работает на IE и Chrome, но я не проверял его в других местах.

В качестве альтернативы, после загрузки страницы, переберите все поля формы, найдите самое большое и установите высоту остальных, используя их атрибут style.height.

0 голосов
/ 16 апреля 2010

Может быть, я не в базе, но вы пытались использовать значения высоты строки?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...