为什么浮动设置不工作?是因为li还是ul?

Question

我正在制作自动旋转木马，但li浮动不起作用。为什么这个列表是水平延伸的?如果我将display: block;或overflow: hidden;设置为ul，它只会剪切底部部分，而不会浮动列表。

HTML和CSS

ul.slide-wrap {
position: relative;
width: 600%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.slide-box {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
li.slide-item {
width: 100%;
height: 100%;
float: left;
}

<div class="slide-box">
<ul class="slide-wrap">
<li class="slide-item">1</li>
<li class="slide-item">2</li>
<li class="slide-item">3</li>
<li class="slide-item">4</li>
<li class="slide-item">5</li>
</ul>
</div>

Answer 1

我这样做了，我没有解决它，但这里有一些提示:

ul.slide-wrap {
/* position: relative; */
width: 600%;
/* height: 100%; */
/* you can use height: 100vh; */
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
.slide-box {
/* position: absolute; */
top: 0;
width: 100%;
/* height: 100%; */
z-index: 1;
}
li.slide-item {
width: 100%;
/* height: 100%; */
/* float: left; */
}

你可以把这个设置为body来确保宽度不超过100%这样就不会有水平滚动了

body {
max-width: fit-content;
}