网站添加自动轮播图后出现横向滚动条，求解决方案

嘿，我瞅了你的代码，立刻就发现为啥overflow: hidden没起作用了——你的轮播容器#slider没有明确的宽度限制，而且轮播的figure用了position: absolute直接脱离了文档流，导致容器根本没法“包裹”住它，overflow属性自然就失效啦。下面给你一步步修复方案：

1. 给轮播容器设置正确的基础样式 #

首先给#slider加上相对定位和明确的宽高，让它成为绝对定位元素的父容器，同时确保overflow能生效：

#slider {
    overflow: hidden;
    width: 100%; /* 让容器占满页面宽度，可根据需求调整 */
    position: relative; /* 关键：让子元素的绝对定位相对于它 */
    height: 600px; /* 和图片高度保持一致，避免容器高度塌陷 */
}

2. 修正轮播图容器的宽度 #

别用固定的9000px这种硬编码的宽度，改用百分比更灵活，5张图的话总宽度就是500%：

#slider figure {
    position: absolute;
    width: 500%; /* 5张图 × 100% 容器宽度 = 500% */
    margin: 0;
    left: 0; /* 初始化位置，避免默认值干扰 */
    animation: 15s slider infinite;
}

3. 调整单张图片的宽度 #

每张图需要占轮播容器宽度的1/5，也就是20%，这样每张图刚好填满容器：

#slider figure img {
    width: 20%; /* 100% ÷ 5张 = 20% */
    height: 600px;
    float: left;
    object-fit: cover; /* 可选：保持图片比例，防止拉伸变形 */
}

4. 修复代码里的小bug #

• 去掉padding-left: 0 px;里的空格，改成padding-left: 0;
• 删掉无效的padding-top: -10px;（padding不能用负值，要是想调整位置可以用margin-top）

最后验证动画关键帧 #

你原来的动画关键帧是对的，因为left: -400%刚好对应第五张图的位置，动画循环时会回到初始状态，完美适配5张图的轮播。

这样修改之后，轮播容器就能把超出的部分完全隐藏，横向滚动条就不会再出现啦！

内容的提问来源于stack exchange，提问作者Bradley Mallon