Хорошо, это, похоже, невозможно сделать правильно. У меня есть текстовое поле и поле выбора. Я хочу, чтобы они были одинаковой ширины, чтобы они выровнялись по левому и правому краям.
<!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']чтобы указать те, к которым вы хотите его применить.