html - CSS 响应式按钮

Question

我的网站是https://www.webovo.nl .关于https://www.webovo.nl/blog/在右上角的页面上，我有一个蓝色的“Zoeken(搜索)”按钮和一个搜索文本字段。我将按钮设置为“宽度:100%!重要；”，但我希望搜索字段与搜索按钮的宽度相同。我已将搜索字段 (input[type="search"]) 的宽度更改为 100% !important 但没有任何改变。

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

我哪里错了？我希望你能通过检查 www.webovo.nl 的元素和源代码找到解决方案

谢谢

Answer 1

问题解决了!搜索字段在 <label> 中具有 display:inline-block 样式的标签.您在这里有 2 个选择:

1) 改变 display该 parent 的级别 <label>至 block

或

2) 给出 <label> width:100% 的属性

希望对你有帮助:-)