Код формы:
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;
}
Комментариев нет:
Отправить комментарий