Страницы

Поиск по вопросам

суббота, 13 июля 2019 г.

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

Код формы:
div { font-size: 12px; font-family: Arial, sans-serif; } #block-search { float: right; margin: 7px 10px; } #block-search input[type="text"] { background: #f4f4ec; border: #dfdfdf 1px solid; } #block-search input[type="submit"] { background: #ce3c00; color: #ffffff; text-transform: uppercase; font-size: 12px; font-family: Arial, sans-serif; border: #ba4f23 1px solid; height: 21px; }


Вот так это выглядит сейчас:
Мне нужно, чтобы кнопка раполагалась на одной линии с полем ввода. Пробовал различные комбинации margin и padding, ничего не получилось. Если использовать флексы, то теряются все горизонтальные отступы между элементами.


Ответ

Сброс стандартных отступов и втяжек + выравнивание по вертикали
div { font-size: 12px; font-family: Arial, sans-serif; } #block-search { /*float: right;*/ margin: 7px 10px; } #block-search form{ vertical-align:middle; } #block-search input[type="text"] { background: #f4f4ec; border: #dfdfdf 1px solid; margin:0; padding:0; display:inline-block; } #block-search input[type="submit"] { background: #ce3c00; color: #ffffff; text-transform: uppercase; font-size: 12px; font-family: Arial, sans-serif; border: #ba4f23 1px solid; height: 21px; margin:0; padding:0; display:inline-block; }


Комментариев нет:

Отправить комментарий