CSS Отзывчивая кнопка

Question

Мой сайт https://www.webovo.nl. На странице https://www.webovo.nl/blog/ в правом верхнем углу у меня есть голубая кнопка «Zoeken (Search)» и текстовое поле поиска над ней. Я сделал кнопку «ширина: 100%! Important;», но я хочу, чтобы поле поиска было такой же ширины, что и кнопка поиска. Я изменил ширину поля поиска (input [type = "search"]) на 100%! важно, но ничего не изменилось.

Когда я меняю ширину моего браузера Chrome Chrome, я вижу, что в какой-то момент кнопка будет иметь ту же длину, что и поле поиска. Когда браузер достигает ширины мобильного телефона, кнопка падает до нижней части страницы, и она снова становится больше поля поиска.

Где я иду не так? Я надеюсь, что и может найти решение по проверке элементов и исходный код www.webovo.nl

Благодарности

Answer 1

Вы можете добавить свой собственный стиль, чтобы таблицы стилей. Добавьте этот класс в свою таблицу стилей:

form.search-form label { width: 100%; } 

Answer 2

Проблема решена! Поле поиска находится в теге <label>, у которого есть стиль display:inline-block. У Вас есть 2 варианта здесь:

1) Либо изменить display уровень этого родителя <label> к block

ИЛИ

2) Подари что <label> свойство width:100%

Надежда, что помогает вам: -)