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%

希望的屬性，可以幫助你： - ）