Хорошо, это, похоже, невозможно сделать правильно. У меня есть текстовое поле и поле выбора. Я хочу, чтобы они были одинаковой ширины, чтобы они выровнялись по левому и правому краям.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
</select>
</body>
</html>
Как вы думаете, это сработает, правда? Нет. Поле выбора на 6 пикселей короче в Firefox. Смотрите скриншот.
Хорошо, давайте отредактируем код и создадим два стиля.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
Хорошо, это работает!
Ой, подождите, лучше протестируйте в Chrome ...
Может кто-нибудь сказать мне, как выровнять их во всех браузерах? Почему я не могу просто указать ширину: 200 пикселей для всех, почему все браузеры отображают это по-разному? Также, пока мы находимся на этом, почему текстовое поле и поле выбора имеют разную высоту? Как добиться одинаковой высоты? Пробовали высоту и высоту строки безрезультатно.
Решение:
Хорошо, я нашел решение с помощью ответов ниже. Ключевым моментом является использование свойства box-sizing: border-box, чтобы при указании ширины, включающей границу и отступы. Смотрите отличное объяснение здесь . Тогда браузер не сможет его забить.
Код ниже, также установили высоту полей того же размера и сделали отступ текста внутри поля, чтобы он выровнялся. Вам также необходимо установить границу, так как у Chrome действительно странная граница, которую он использует для полей выбора, которые выбрасывают выравнивание. Это будет работать для сайтов HTML5 (например, с поддержкой IE9, Firefox, Chrome, Safari, Opera и т. Д.).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
<option>123456789 123123123123</option>
<option>123456789 123123123123 134213721381212</option>
</select>
</body>
</html>
Еще одно последнее предупреждение: вы можете не захотеть, чтобы кнопки ввода, флажки и т. Д. Были включены в этот стиль, поэтому используйте, input:not([type='button'])чтобы не применять его к определенным типам, или используйте, input[type='text'], input[type='password']чтобы указать те, к которым вы хотите его применить.
источник
Ответы:
Это связано с тем, что у
<input type="text" />элемента стиль по умолчанию немного отличается от стиля<select>элемент, например, значения границы, отступов и полей могут отличаться.Вы можете наблюдать за этими стилями по умолчанию с помощью инспектора элементов, такого как Firebug для Firefox или встроенного в Chrome. Более того, эти таблицы стилей по умолчанию различаются от браузера к браузеру.
У вас есть два варианта:
Я бы выбрал вариант 1, потому что вариант 2 требует много работы и в итоге вы получите массу ненужного CSS. Но некоторые веб-разработчики предпочитают начинать с нуля и иметь полный контроль.
источник
padding:0; margin:0; border:1px solid #000;которая хорошо выравнивает ширину текстовых полей / полей выбора. Однако, если вы посмотрите на текст внутри двух полей, вы заметите, что текст в поле выбора дополнен дополнительными отступами. Почти нужно добавить еще один конкретныйinput { padding-left: 5px; }стиль после первого, который нужно исправить. Есть идеи? Я использовал сброс CSS на сайте, который создавал, прежде чем создавать этот базовый тестовый код, но проблема все еще существовала. Сброс CSS, по-видимому, не исправлял эту конкретную проблему с шириной поля текста / выбора.input {text-indent: 5px;}PS<select>тег очень жесткий и зависит от операционной системы - он игнорирует много CSS.Это приблизит вас, но такой уровень точности практически невозможен.
<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div> <div style="width: 200px"> <select id="Select1" style="width: 100%; margin: 0; padding: 0"> <option>1</option> </select> </div>источник
По умолчанию разные браузеры применяют разные стили. Я обнаружил, что сброс полей и отступов на 0 делает оба элемента равной ширины как в Firefox, так и в Chrome.
<html> <head> <title>Test</title> <style type="text/css"> input, select { margin: 0; padding: 0; width: 200px; } </style> </head> <body> <input type="text" value="ABC"><br /> <select> <option>123</option> </select> </body> </html>Мне лично нравится использовать минимальную таблицу стилей сброса CSS, такую как YUI CSS Reset, прежде чем пытаться улучшить дизайн в нескольких браузерах.
источник
input { padding-left: 5px; }. Это правильный способ сделать это? Я использовал сброс CSS на сайте, который создавал, прежде чем создавать этот базовый тестовый код, но проблема все еще существовала. Сброс CSS не устранил эту конкретную проблему с шириной поля для текста / выбора.inputиselectэлементы стоит, учитывая все обстоятельства. Совмещение внешних краев этих элементов выглядит эстетически неплохо.Добавьте класс к рассматриваемым тегам select и input, т.е.
<input class='custom-input'/> <select class='custom-input'></select>затем измените CSS ниже, чтобы он соответствовал вашему дизайну:
.custom-input { width:140px; border:1px solid #ccc; margin:1px; padding:3px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; }obvs это исправление для поддержки браузеров
источник
Если вы используете таблицы 4 входных данных, вы можете использовать следующее решение - также совместимое с ie7:
<tr style="width:1px;"><td style="width:inherit;position:relative;"> <select style="width:100%;"> </select> </td></tr> <tr><td> <input type="text" style="width:150px;"/> </td></tr>Таким образом, ширина ячейки таблицы будет привязана к ширине ввода,
Таким образом, select всегда будет занимать оставшуюся ширину и идеально совпадать с вводом d.
источник
Попробуйте удалить границы по умолчанию с обоих элементов:
select, input { border:0; }источник
Да, очень неприятно. Однако у меня никогда не было проблем с этим, пока я не поместил тег «<! DOCTYPE html>» вверху моей HTML-страницы. Моя веб-страница правильно отображалась на всех платформах, которые я мог протестировать, пока я не поместил этот тег в верхнюю часть документа.
Хотя это «настоящая спецификация», похоже, что это источник этих проблем с выравниванием. FWIW, я использую элементы HTML5, встроенный CSS и т.д., все без этого тега, чтобы указать HTML5. YMMV.
источник