如何刪除網站右側的多余空間

Question

我已經使用 tailwindcss 和 glider.js 為簡單的 slider 構建了一個登陸頁面，但是在我完成網站后，我對響應式設計部分的問題感到震驚，我確信之前沒有發生問題，那就是我有一個額外的空間當我僅在 chrome 上使用 chrome inspector 設備工具欄時，將所有設備中的大部分設置為正確，僅在 mozilla 上可以正常工作，但只有此網站在 chrome 上存在此問題。

我已經檢查了可能是原因但沒有任何運氣的任何因素。 如您所見，我的 html 元素寬度是 1536，就像尺寸一樣，但額外的空白實際上超過 1536。

Answer 1

此問題可能是由多種原因造成的，以下是一些可能的原因和解決方案：

CSS styles：確保容器元素（容納滑塊）的 styles 設置正確。 檢查可能導致額外空間的填充、邊距和邊框 styles。

Slider 尺寸：確保滑塊的寬度設置正確。 如果它太大，可能會導致額外的空間。

JS 代碼：檢查初始化 slider 的 JS 代碼。確保滑塊的寬度設置正確，並且 slider 在容器元素中的位置正確。

瀏覽器差異：Chrome 和 Mozilla 具有不同的渲染引擎。 相同的代碼在這兩個瀏覽器中可能表現不同。 如果問題僅出現在 Chrome 中，則可能是 Chrome 瀏覽器中的錯誤。 嘗試在不同的瀏覽器上測試該網站，看看問題是否也出現在其他瀏覽器上。

屏幕尺寸：問題可能與屏幕尺寸有關。 嘗試在不同的設備和屏幕尺寸上測試網站，看看問題是否在所有設備上都一致。

嘗試這些解決方案，看看問題是否得到解決。 如果不是，請提供有關問題和您正在使用的代碼的更多信息。

Answer 2

div class 2xl:max-w-[1535px] 可能導致內容不再進一步拉伸。 嘗試在 css 文件中更改此值，看看是否有幫助。

在您的 main.css 文件中：

    @media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}

在您的 index.html 中，嘗試注釋掉正文中第二個 div 元素的“容器”class，看看這是否會導致寬度限制。

Answer 3

所以問題是我正在使用轉換轉換動畫我已經設置溢出隱藏到身體但沒有工作。

我解決它的方法只是應用overflow:hidden為所有帶動畫的元素的父元素。