CSS - 元素不分割，向下移動

我正在創建一個網站，但我遇到了一些元素的問題。默認位置是這個 - http://gyazo.com/43fb8851f0b98f0461c05e13fe90382f（看起來對我好）。但是當一個網站的寬度較小時，會發生類似這樣的事情 - http://gyazo.com/27d02e101bcb051faa9c1ab594a8d54a - 某些元素會分裂並且它們分成兩行，並且它們都非常接近它們上方的行。我真的不能解決這個問題。可以請任何人幫助我嗎？ :)CSS - 元素不分割，向下移動

實現起來很簡單，但這只是一個圖像。你有沒有可以參考的元素？ – designarti

尋求調試幫助的問題（「爲什麼不是這個代碼工作？」）必須包含所需的行爲，特定的問題或錯誤以及在問題本身中重現問題所需的最短代碼。沒有明確問題陳述的問題對其他讀者無益。請參閱：[**如何創建最小，完整和可驗證示例。**]（http://stackoverflow.com/help/mcve） –

首先在你的藍色容器中嘗試在他的班級中使用overflow:hidden;。比試圖給一些margin-top:10px;輸入。

但我認爲你必須使用媒體查詢爲你的元素設置更好的風格。

要使用媒體查詢，請在頭部添加<meta name="viewport" content="width=device-width">。

比你的CSS添加所需的媒體querys：這樣

@media screen and (max-width: 600px) { 
input { 
    width:100%; 
}}

這個媒體查詢的變化歸因於該輸入時的視口寬度爲600像素下。嘗試

2015-06-14 13:50:03

回答