我的 CSS 代码"overflow:hidden"不起作用

Question

我正在尝试制作转盘

我使用wsl2 ubunto进行开发使用python django

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

我尝试使用overflow-x:隐藏而不是overflow：隐藏

.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;添加到类.slider中。您的滑块容器.slide_container在它的外部。

将overflow: hidden;添加到通用选择器中，还应该添加.main类的内容。正如它们用于重置浏览器样式一样。

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

代码笔：https://codepen.io/manaskhandelwal1/pen/wvzEKJR