我目前正在制作一個帶有圖像的幻燈片，我想防止水平溢出，這樣當我刷新頁面時，內容就不會向右移動。我已經應用了CSS屬性overflow-x:hidden；到。幻燈片類，但是好像沒有預期的效果。

超文本標記語言

`<section class="slideshow">
 <div class="sliders">
    <div class="slides">
        <!--Radio Button Start-->
        <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"> 
        <!--Radio Button End-->

        <!--Image Start-->
        <div class="slide first">
            <img src="/images/landing.jpg"> 
        </div>
        <div class="slide">
            <img src="/images/pexels-photo-15408977.jpeg"> 
        </div>
        <div class="slide">
            <img src="/images/pexels-photo-443383.jpeg"> 
        </div>
        <div class="slide">
            <img src="/images/pool.jpg"> 
        </div> 
        <!--Image End-->

        <!--Automatic Navigation Start-->
        <div class="navigation-auto">
            <div class="auto-btn-1"></div>
            <div class="auto-btn-2"></div>
            <div class="auto-btn-3"></div>
            <div class="auto-btn-4"></div>
        </div> 
        <!--Automatic Navigation End-->
    </div>
        <!--Manual Navigation Start-->
        <div class="navigation-manual">
            <label for="radio1" class="manual-btn"></label>
            <label for="radio2" class="manual-btn"></label>
            <label for="radio3" class="manual-btn"></label>
            <label for="radio4" class="manual-btn"></label>
        </div>
        <!--Manual Navigation End-->
         <div class="landing-page">
            <img id="logo" src="/images/Watts Investment Group LLC.png">
            <p>Watts Investment Group LLC.</p>
            <h3>DISCOVER HIGH-VALUE COMMERCIAL PROPERTIES</h3>
            <div class="social">
                <ul class="socials">
                    <a href="#"><li><i class="fa-brands fa-instagram"></i></li></a>
                    <a href="#"><li><i class="fa-brands fa-facebook"></i></li></a>
                    <a href="#"><li><i class="fa-brands fa-linkedin"></i></li></a>
                    <a href="#"><li><i class="fa-brands fa-twitter"></i></li></a>
                </ul>
            </div>
        </div>
    </div> 
<!--Images Slider End-->
 </section>`

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

`.slideshow {
    height: 100vh;
    overflow-x: hidden;
}

.slider {
    width: 100%;
    border-radius: 20px;
}

.slides {
    width: 500%;
    height: 500px;
    display: flex;
    position: absolute;
    left: 80px;
 }

.slides input {
    display: none;
}

.slide {
    width: 20%;
    transition: 4s;
}

.slide img {
    position: absolute;
    z-index: 1;
    width: 1300px;
    height: 720px;
    border-radius: 10px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.653)) brightness(55%);
}`

我已經證實。幻燈片類是正確的目標，我也設置了溢出-x專門隱藏。但是，當我刷新頁面時，內容仍然將我的頁面向右推，這表明水平溢出沒有被隱藏。