Выравнивание текста и выбор полей до одинаковой ширины в CSS?
ок это казалось бы невозможным. У меня есть текстовое поле и поле выбора. Я хочу, чтобы они были одинаковой ширины точно так, чтобы они выстраивались на левом поле и правом поле.
<!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>
что бы сделать это вы думаете, верно? Нет. Поле выбора на 6px короче в Firefox. Смотрите скриншот. 
ок, так что давайте редактировать код и сделать два стиля.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
хорошо, что работает!
Ой, подождите, лучше проверить в Chrome...
может кто подскажет как это во всех браузерах? Почему я не могу просто сделать width: 200px на всех, почему все браузеры отображают его по-разному? Кроме того, пока мы на нем, почему текстовое поле и выберите поле разной высоты? Как нам поднять их на одну высоту? Попробовали высоту и линию-высота безрезультатно.
устранение:
Ок, я нашел решение с помощью ответы ниже. Ключ заключается в использовании 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'] чтобы указать те, к которым вы хотите его применить.
7 ответов:
это так
<input type="text" />элемент имеет немного другой стиль по умолчанию<select>элемент, например, границы, отступы и отступы могут быть разными.вы можете наблюдать эти стили по умолчанию с помощью инспектора элементов, таких как Firebug для Firefox или встроенный для Chrome. Кроме того, эти таблицы стилей по умолчанию отличаются от браузера к браузеру.
у вас есть два варианта:
- явно установите границы, отступы и поля значения должны быть одинаковыми для обоих элементов
- таблица стилей сброса CSS должна быть включена перед вашими собственными таблицами стилей CSS
Я бы пошел с вариантом 1. потому что вариант 2. требует много работы и вы будете в конечном итоге с тоннами ненужного фрагмента. Но некоторые веб-разработчики предпочитают начинать с нуля и полный контроль.
Это позволит вам приблизиться, но этот уровень точности почти невозможен.
<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 прежде чем пытаться сделать дизайн отлично смотреться в разных браузерах.
добавить класс для выбора и ввода тегов в вопросе ie:
<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 это исправление для поддержки браузеров
Если u использует таблицы 4 входы u может использовать следующее решение - также совместим с 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>таким образом, ширина ячейки таблицы будет привязана к ширине входного сигнала,
и таким образом, выбор всегда будет принимать оставшуюся ширину и идеально соответствовать входу d.
да, крайне неприятно. Однако, у меня никогда не было проблем с этим, пока я не поставил " " тег в верхней части моей HTML-страницы. Моя веб-страница отображается правильно на всех платформах, которые я мог бы проверить, пока я не поставлю этот тег в верхней части моего документа.
хотя это "подлинная спецификация", она, похоже, является источником этих проблем выравнивания. FWIW, я использую элементы HTML5, встроенный CSS и т. д., все без этого тега, чтобы указать HTML5. МММ.
Comments