如何居中1700px的div，以便沒有水平滾動條出現？

我正在建立一個頂部有1700px寬的JS幻燈片的網站。當我發佈該頁面時，由於我的顯示器的分辨率爲1024px，因此我獲得了水平滾動條。我如何讓網站在瀏覽器中居中放置，沒有橫向滾動條 - 而且任何一方都是多餘的，對用戶來說是不可見的？幫助非常感謝，謝謝！如何居中1700px的div，以便沒有水平滾動條出現？

來源

2011-07-06 Carin

如果您在使用1024px分辨率時設計1700像素，則用戶顯然不會看到邊，特別是在您移除滾動條時。這是一種邏輯，你不覺得嗎？ – Christophe

@krike：問題是如何**刪除滾動條。 –

@Matthew：是的，我知道這就是爲什麼我評論而不是回答。而我只回答了他的第二個問題（在他的問題的描述中發現） - >「並且任何一方都是多餘的，對用戶來說是不可見的？」 – Christophe

簡單的解決方案：

body { overflow-x: hidden; }

但是，這也將阻止人們滾動，如果他們的顯示器是小比您網站的主要寬度。

真正的解決方案是根本沒有它一直是1700px寬。類似下面的內容可能會有所幫助，但這取決於您的HTML以及幻燈片的實現方式。

#slideshow { width: 100%; max-width: 1700px; }

~~我沒有測試過這一點，但你可以用把一個容器元素以上CSS，這樣的事情就完事了：~~

~~#slideshow-container { width: 100%; max-width: 1700px; } #slideshow { width: 1700px; margin: 0 auto; }~~

你可以很容易地做到這一點。 jsFiddle example。

來源

2011-07-06 08:50:10

非常感謝您的回答！我設法讓它工作，我也使用了overflow-x：hidden，但我將它應用到了html標籤。我從我的#slideshow_wrapper div中刪除了寬度聲明，但仍然無法工作，直到我記起屬於使幻燈片顯示工作的JS的樣式表也會聲明寬度時，我無法確定發生了什麼。在那裏我只是設置寬度：自動和瞧！它工作耶！ – Carin

正如你所知道的div的大小，使用：

div.slideshow { 
    position:absolute; 
    padding-left:50%; 
    margin-left:-850px; /* 1700/2 */

}

來源

2011-07-06 08:49:28 SteeveDroz

感謝您的回答！我實際上找到了一種方法來使它工作 - 但我覺得你的解決方案很有趣。將設置一個餘量：-850px;不要把它搞砸了不同的屏幕分辨率？如果設置邊距，如果某人在1024像素上會發生什麼情況？我想我會去測試它：D謝謝！ – Carin

如何居中1700px的div，以便沒有水平滾動條出現？

回答

相關問題