我的 css 代碼“溢出：隱藏”不起作用

Question

我正在嘗試制作旋轉木馬

我使用 wsl2 ubunto 開發使用 python django

這是我的文件https://github.com/YEONGORI/ShoppingMalll-Project.git

我嘗試使用 overflow-x: hidden 而不是 overflow: hidden

 .main { padding: 0px; margin: 0px; box-sizing: border-box; }.slider { width: 640px; height: auto; overflow: hidden; position: relative; }.slide_container { position: absolute; width: 500%; height: auto; display: flex; }.slide_container input { display: none; }.slide { width: 20%; transition: 1s; }.slide img { width: 640px; height: 430px; }

 <div class="slider"></div> <div class="slide_container"> <.-- radio buttons --> <input type="radio" name="radio-btn" id="radio1"> <input type="radio" name="radio-btn" id="radio2"> <input type="radio" name="radio-btn" id="radio3"> <input type="radio" name="radio-btn" id="radio4"> <.-- slide images --> <div class="slide first"> <img src="{% static 'images/slide/test1.PNG' %}"> </div> <div class="slide"> <img src="{% static 'images/slide/test2.PNG' %}"> </div> <div class="slide"> <img src="{% static 'images/slide/test3.PNG' %}"> </div> <div class="slide"> <img src="{% static 'images/slide/test4.PNG' %}"> </div> </div> </div>

Answer 1

您添加了overflow: hidden; 到 class .slider你的 slider 容器在哪里.slide_container在它外面。

添加overflow: hidden; 到通用選擇器，您還應該添加.main的內容。 因為它們用於重置瀏覽器樣式。

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  overflow: hidden;
}

代碼筆： https://codepen.io/manaskhandelwal1/pen/wvzEKJR