Гаразд, здається, неможливо правильно зрозуміти. У мене є текстове поле та поле вибору. Я хочу, щоб вони мали однакову ширину, щоб вони вирівнювались на лівому та правому полях.
<!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 ...
Хтось може сказати мені, як їх вирівняти у всіх браузерах? Чому я не можу просто зробити 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']щоб вказати ті, до яких ви хочете, щоб це застосовувалось.