CSS响应按钮

Question

我的网站是https://www.webovo.nl。在右上角的https://www.webovo.nl/blog/页面上，我有一个蓝色的“Zoeken（搜索）”按钮和一个位于其上的搜索文本字段。我已经使按钮“宽度：100％！重要”，但我希望搜索字段与搜索按钮的宽度相同。我已将搜索字段的宽度（输入[type =“search”]）更改为100％！很重要，但没有任何更改。

当我更改我的谷歌浏览器的宽度时，我发现按钮的长度与搜索字段的长度相同。当浏览器达到手机宽度时，按钮会下降到页面底部，然后再次变大，然后搜索字段。

我哪里错了？ 我希望你能找到通过检查部件的溶液和www.webovo.nl的源代码

感谢

Answer 1

您可以添加自定义风格样式表。将此类添加到您的样式表中：

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

Answer 2

问题已解决！ 搜索字段位于<label>标签中，其标签样式为display:inline-block。你有2个选择这里：

1）任何改变display水平父<label>来block

OR

2）把那<label>width:100%

希望的属性，可以帮助你： - ）