當窗口重新調整大小時，按鈕無法跟上滑塊

-1

每當我重新調整窗口大小時，滑塊按鈕（next/previous）消失，不要隨滑塊一起移動。任何想法如何解決這個問題？的jsfiddle：https://jsfiddle.net/b31kvqwr/當窗口重新調整大小時，按鈕無法跟上滑塊

按鈕CSS：

#nav img { 
    position: absolute; 
    top: -10px; 
    cursor:pointer; 
    color:grey; 
    width:40px; 
    height:30px; 



} 
#prev { 
    margin-left: 530px; 
    font-size: 10px; 

} 
#next { 
    right: -30px; 
    margin-top: 13px; 

}

PS：如果結果中的jsfiddle不顯示，展開結果選項卡。

這就是當全屏幕（正確的方式）時滑塊的樣子; enter image description here

這會發生什麼，當我重新大小的瀏覽器水平：

enter image description here

的按鈕不與移動滑塊。請幫忙嗎？

來源

2015-06-26 mikeb

@Tiny巨人，你要求 – mikeb

只是爲了讓你知道，刪除的問題可以得到你的問題被禁止。將來，請編輯您現有的問題，但謝謝您提供所需圖片。 –

@TinyGiant好男人謝謝你讓我知道 – mikeb

目前的問題是您使用的是margin-left:530px;，這意味着無論屏幕大小如何，屏幕左側的箭頭總是530px。它也看起來像什麼包裝它有一個設置的寬度，並沒有調整大小，你的代碼是混亂的我找到這個，但有幾件事，我發現使問題更好一點，

https://jsfiddle.net/b31kvqwr/2/

我已經設法保留了很多的正確位置，但是爲了改進它的完美運行，您需要創建1-2個@media查詢來推送不同尺寸的對齊以使其完美。

我這樣做的方法是將margin-left更改爲position:absolute並使用left定位代替您的prev和next按鈕;

#prev { 
    left: 50%; 
    font-size: 10px; 
    position:absolute; 
} 
#next { 
    margin-top: 13px; 
    left:58%; 
    position:absolute; 
}

正如我注意到我會建議清理你的代碼，如@TingGaint說，因爲它是瘋狂的凌亂。另外，在堆棧上發佈時，請嘗試僅包含相關的代碼，而不是全部，因爲這樣可以更快更輕鬆地查找和幫助。

編輯

我已經找到了問題，還是做我上面可是現在不是有箭頭格在那裏他們現在說，移動出來，所以有以下< div id="wrapper">然而，你將不得不隨便擺放位置，因爲它們將位於屏幕的頂部。但是現在他們在重新調整尺寸時仍然保持在同一個地方！

示例 - https://jsfiddle.net/b31kvqwr/4/

來源

2015-06-26 23:10:36

當窗口重新調整大小時，按鈕無法跟上滑塊

回答

相關問題