添加自动幻灯片创建了水平滚动？答案

【问题标题】：Adding an automatic slideshow has created a horizontal scroll?添加自动幻灯片创建了水平滚动？
【发布时间】：2018-01-08 13:57:30
【问题描述】：

我昨晚在我的网站上添加了一个自动幻灯片，它运行良好，并且我喜欢它，但是它创建了一个非常烦人的水平滚动条，让我可以向右滚动以查看即将发布的照片。我试过 x-overflow: hidden;但这没有奏效。

有人知道我可以解决这个问题吗？

Screenshot 1

Screenshot 2

a {
    text-decoration: none;
}

/* Centering and styling the logo */
img.center {
    display: block;
    margin: auto; /* Image wasn't exactly centred until I added the 0 */
    width: 8%;
   padding: 0 65px 0 0;
}

/* Removing the bullet-points and styling the nav bar */
ul {
    list-style: none;
    padding: 0 0 20px 0;
    margin-top: 0px;
    background-color: #000000;
    text-align: center;
    z-index: 100;

}
li {
    float: left;
    margin-right: 15px;
    display: inline-block;
    padding: 0 89px 0 85px;
}
li a {
    display: block;
    color: white;
    font-family: courier;
}


head {
    margin: 0;
}

body {
    color: black;
    margin: 0;

}

footer {
    margin: 0;
}


@keyframes slider {
    0% {
        left: 0;
    }

    20% {
        left: 0;
    }

    25% {
        left: -100%;
    }

    45% {
        left: -100%;
    }

    50% {
        left: -200%;
    }

    70% {
        left: -200%;
    }

    75% {
        left: -300%;
    }

    95% {
        left: -300%;
    }

    100% {
        left: -400%;
    }
}

#slider {
    overflow: hidden;
}

#slider figure img {
    width: 15%;
    height: 600px;
    float: left;
    display: inline-block;
    padding-left: 0 px;
}

#slider figure {
    position: absolute;
    width:9000px;
    margin: 0px;
    padding-top: -10px;
    padding-left: -100px;
    text-align: center;
    font-size: 0;
    animation: 15s slider infinite; 
}

<header>
    <img src="Images/LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo  -->
    
    <nav> <!-- indicates that page navigation follows -->
        <ul> <!-- Unordered list of elements -->
            <li><a href="about.html">ABOUT US</a></li> <!-- Link to About Us page -->
            <li><a href="venues.html">VENUES</a></li> <!-- Link to Venues page -->
            <li><a href="index.html">HOME PAGE</a></li> <!-- Link to Home Page -->
            <li><a href="artists.html">ARTISTS</a></li> <!-- Link to Artists page -->
            <li><a href="contactus.html">CONTACT US</a></li> <!-- Link to Contact Us page --> 
        </ul>
    </nav>
</header>

<div id="slider">
    <figure>
        <img src="Images/ALGO 1.jpg">
        <img src="Images/ALGO 2.jpg">
        <img src="Images/ALGO 3.jpg">
        <img src="Images/ALGO 4.jpg">
        <img src="Images/ALGO 5.jpg">
    </figure>   
</div>

<h1>Upcoming Events..</h1>

【问题讨论】：

标签： html css

【解决方案1】：

因为您的 #slider figure 元素是绝对定位的，所以它的父元素没有高度。为了使溢出隐藏起作用，您可以像我在下面所做的那样在#slider 元素上指定一个高度。

a {
	text-decoration: none;
}

img.center {      /* Centering and styling the logo */
  display: block;
   margin: auto; /* Image wasn't exactly centred until I added the 0 */
   width: 8%;
   padding: 0 65px 0 0;
}

ul {               /* Removing the bullet-points and styling the nav bar */
 	list-style: none;
  	padding: 0 0 20px 0;
  	margin-top: 0px;
  	background-color: #000000;
  	text-align: center;
  	z-index: 100;

}
li {              
  	float: left;
    margin-right: 15px;
    display: inline-block;
    padding: 0 89px 0 85px;
}
li a {
	display: block;
	color: white;
	font-family: courier;
}


head {
	margin: 0;
}

body {
	color: black;
	margin: 0;

}

footer {
	margin: 0;
}




@keyframes slider {

0% {
	left: 0;
}

20% {
	left: 0;
}

25% {
	left: -100%;
}

45% {
    left: -100%;

}

50% {
		left: -200%;

}

70% {
	left: -200%;
}

75% {
	left: -300%;
}

95% {
	left: -300%;
}

100% {
	left: -400%;

}

}

#slider {
	overflow: hidden;
  width: 100%;
  height : 600px;
  position: relative;
}

#slider figure img {
	width: 15%;
	height: 600px;
	float: left;
	display: inline-block;
	padding-left: 0 px;
}

#slider figure {
	position: absolute;
	width:9000px;
	margin: 0px;
	padding-top: -10px;
	padding-left: -100px;
	text-align: center;
	font-size: 0;
	animation: 15s slider infinite; 

}

<body>
		<header>
			<img src="Images/LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo  -->
			
			<nav> <!-- indicates that page navigation follows -->
				<ul> <!-- Unordered list of elements -->
					<li><a href="about.html">ABOUT US</a></li> <!-- Link to About Us page -->
					<li><a href="venues.html">VENUES</a></li> <!-- Link to Venues page -->
					<li><a href="index.html">HOME PAGE</a></li> <!-- Link to Home Page -->
					<li><a href="artists.html">ARTISTS</a></li> <!-- Link to Artists page -->
					<li><a href="contactus.html">CONTACT US</a></li> <!-- Link to Contact Us page --> 
				</ul>
			</nav>
			

		</header>
		
		<div id="slider" class="clearfix">
			<figure>
				<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg">
				<img src="https://www.google.com/search?q=images&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiSs9C-xsjYAhUFlpAKHX9JC7YQ_AUICigB&biw=1920&bih=949#imgrc=TCzIUatmlfq74M:">
				<img src="Images/ALGO 3.jpg">
				<img src="Images/ALGO 4.jpg">
				<img src="Images/ALGO 5.jpg">
			</figure>	

		</div>

		<h1>Upcoming Events..</h1>

	</body>










</html>

【讨论】：

【解决方案2】：

只需将其添加到 CSS 中：

body {
  overflow: hidden;
}

【讨论】：