体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么这里添加width：100%会出现横向滚动条？

来源：2-10 作业题

localhost999

2020-07-05 01:20:04

问题在CSS/index.css 348行：为什么这里添加width：100%会出现横向滚动条？

（老师可在CSS/index.css 里面搜索关键字“问题”）

http://img.mukewang.com/climg/5f00ba3b09484fe117080941.jpg

所有素材都是本次作业提供的素材

目录详情：

根目录：

http://img.mukewang.com/climg/5f00b9250949688402840121.jpg

CSS目录

http://img.mukewang.com/climg/5f00b97909857e9305560145.jpg

image目录：

http://img.mukewang.com/climg/5f00b99309a6bc9b06570506.jpg

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/normalize.css"> -->
	<title>Career Builder</title>
</head>
<body>
	<!-- 导航栏 -->
	<div class="header">
		<!-- 左边logo -->
		<div class="header-left">
			<img src="images/logo.png" alt="logo">
		</div>
		<!-- 右边导航目录 -->
		<div class="header-right">
			<a href="#1">HOME</a>
			<a href="#2">ABOUT</a>
			<a href="#3">GALLERY</a>
			<a href="#4">FACULTY</a>
			<a href="#5">EVENTS</a>
			<a href="#6">CONTACT</a>

		</div>
	</div>
	<!-- banner区 -->
	<div class="banner">
		<!-- 背景 -->
		<div>
			<img src="images/banner3.jpg" alt="banner">

		</div>
		<!-- 遮罩 -->
		<div class="mask">
			
		</div>
		<!-- 信息框 -->
		<div class="message">
			<form>
				<input type="text" name="name" class="name" placeholder="your Name"> <br/>
				<input type="text" name="phone" class="phone" placeholder="your Phone"><br/>
				<input type="text" name="email" class="email" placeholder="your Email"><br/>
				<input type="text" name="other" class="other" placeholder="Write Other"><br/>
				<input type="submit" name="submit" class="submit" value="SEND MESSAGE"><br/>

			</form>
		</div>
	</div>
	<!-- about区 -->
	<div class="about">
		<!-- about top区 -->
		<div class="about-top">
			<div>
				<p>ABOUT</p>
			</div>
			<div>
				<br/>
				<hr/>
				<br/>
			</div>
			<div class="about-top-word">Lorem Ipsum is simply dummy text of the printing and typesetting<br/>industry.Lorem Ipsum hasbeen the industry's standard dummy<br/>text ever since the 1500s.
				
			</div>
		</div>
		<!-- about middle区 -->
		<div class="about-middle">
			<div class="about-middle-middle">
				<!-- about middle区-中区 -->
				<img src="images/bb3.jpg" alt="about-middle">
				<!-- about middle区-左区 -->
					<!-- ABOUT US -->
				<div class="about-middle-left-1">
					A WORD<br/>ABOUT US
				</div>
					<!-- 透明遮罩 -->
				<div class="about-middle-left-2">
					
				</div>
					<!-- 透明遮罩里面的字 -->
				<div class="about-middle-left-3">
					<p>Praesent dignissim viverra est,set<br/>bibendum ligula congue non. Sed ac nisl<br/>et felis gravida commodo?Suspendisse<br/>eget ullamcorper ipsum. Suspendisse<br/>diam amet.</p>
				</div>
					<!-- 透明遮罩里面的按钮 -->
				<div class="about-middle-left-4">
					<a href="#7">EXPLORE</a>
				</div>
				<!-- about middle区-右区 -->
				<div class="about-middle-right-1">
					<b>70000</b><br/><hr/>Students
				</div>
				<div class="about-middle-right-2">
					<b>600</b><br/><hr/>Faculty
				</div>
			</div>
		</div>
		<!-- about bottom区 -->
		<div class="about-bottom">
			<div class="about-bottom-photo">
				<img src="images/b1.jpg">
			</div>

			<div class="about-bottom-word">
				<!-- 字 -->
				<p class="about-bottom-word-h1">library</p>
				<br/>
				<p class="about-bottom-word-h2">Lorem Ipsum is simply dummy text of the<br> printing and typesetting indsutruy
				<br/>
				<p class="about-bottom-word-h3">Lorem Ipsum has been the industry's standard dummy<br/>text ever since the 1500s, when an unknown printer took<br/>a galley of type and scrambled it to make a type<br/> specimen book.</p>
				<!-- 按钮 -->
				<div class="about-bottom-botton">
					<a href="#8">EXPLORE</a>
				</div>
			</div>

			<div class="about-bottom-photo">
				<img src="images/b2.jpg">
			</div>

			<div class="about-bottom-word">
				<!-- 字 -->
				<p class="about-bottom-word-h1">Computer LAB</p>
				<br/>
				<p class="about-bottom-word-h2">Lorem Ipsum is simply dummy text of the<br> printing and typesetting indsutruy</p>
				<br/>
				<p class="about-bottom-word-h3">Lorem Ipsum has been the industry's standard dummy<br/>text ever since the 1500s, when an unknown printer took<br/>a galley of type and scrambled it to make a type<br/> specimen book.</p>
				<!-- 按钮 -->
				<div class="about-bottom-botton">
					<a href="#9">EXPLORE</a>
				</div>
			</div>
			<div class="about-bottom-word">
				<!-- 字 -->
				<p class="about-bottom-word-h1">Conference Hall</p>
				<br/>
				<p class="about-bottom-word-h2">Lorem Ipsum is simply dummy text of the<br> printing and typesetting indsutruy</p>
				<br/>
				<p class="about-bottom-word-h3">Lorem Ipsum has been the industry's standard dummy<br/>text ever since the 1500s, when an unknown printer took<br/>a galley of type and scrambled it to make a type<br/> specimen book.</p>
				<!-- 按钮 -->
				<div class="about-bottom-botton">
					<a href="#10">EXPLORE</a>
				</div>
			</div>

			<div class="about-bottom-photo">
				<img src="images/b3.jpg">
			</div>

			<div class="about-bottom-word">
				<!-- 字 -->
				<p class="about-bottom-word-h1">Play Ground</p>
				<br/>
				<p class="about-bottom-word-h2">Lorem Ipsum is simply dummy text of the<br> printing and typesetting indsutruy</p>
				<br/>
				<p class="about-bottom-word-h3">Lorem Ipsum has been the industry's standard dummy<br/>text ever since the 1500s, when an unknown printer took<br/>a galley of type and scrambled it to make a type<br/> specimen book.</p>
				<!-- 按钮 -->
				<div class="about-bottom-botton">
					<a href="#11">EXPLORE</a>
				</div>
			</div>

			<div class="about-bottom-photo">
				<img src="images/b4.jpg">
			</div>
		</div>
	</div>
	<!-- GALLERY区 -->
	<div class="GALLERY">
		<!-- GALLERY区 top区 -->
		<div class="GALLERY-top">
			<div>
				<p>GALLERY</p>
			</div>
			<div>
				<br/>
				<hr/>
				<br/>
			</div>
			<div class="GALLERY-top-word">Lorem Ipsum is simply dummy text of the printing and typesetting<br/>industry.Lorem Ipsum hasbeen the industry's standard dummy<br/>text ever since the 1500s.
				
			</div>
		</div>

		<!-- GALLERY区 bottom区 -->
		<div class="GALLERY-bottom">
			<!-- 整个大框1 -->
			<div class="GALLERY-bottom-big">
				<!-- 大框里面的图片 -->
				<div class="GALLERY-bottom-big-photo">
					<img src="images/03-01.jpg" alt="">
				</div>
				<!-- 大框里面的字 -->
				<div class="GALLERY-bottom-big-word">
					<p>SCIENCE LAB</p>
				</div>
				
			</div>
			<!-- 整个大框2 -->
			<div class="GALLERY-bottom-big">
				<div class="GALLERY-bottom-big-photo">
					<img src="images/03-02.jpg" alt="">
				</div>
				<div class="GALLERY-bottom-big-word">
					<p>INDOOR STANDIUM</p>
				</div>
			</div>
			<!-- 整个大框3 -->
			<div class="GALLERY-bottom-big">
				<div class="GALLERY-bottom-big-photo">
					<img src="images/03-03.jpg" alt="">
				</div>
				<div class="GALLERY-bottom-big-word">
					<p>TRANSPORTATION</p>
				</div>
			</div>
			<!-- 整个大框4 -->	
			<div class="GALLERY-bottom-big">
				<div class="GALLERY-bottom-big-photo">
					<img src="images/03-04.jpg" alt="">
				</div>
				<div class="GALLERY-bottom-big-word">
					<p>KIDS ROOM</p>
				</div>
			</div>
			<!-- 整个大框5 -->
			<div class="GALLERY-bottom-big">
				<div class="GALLERY-bottom-big-photo">
					<img src="images/03-05.jpg" alt="">
				</div>
				<div class="GALLERY-bottom-big-word">
					<p>MEDITATION CLASSES</p>
				</div>
			</div>
			<!-- 整个大框6 -->
			<div class="GALLERY-bottom-big">
				<div class="GALLERY-bottom-big-photo">
					<img src="images/03-06.jpg" alt="">
				</div>
				<div class="GALLERY-bottom-big-word">
					<p>KIDS PLAY GROUND</p>
				</div>
			</div>

		</div>

	</div>

	<!-- 页脚区 -->
	<div class="footer">
		&copy; 2016 imooc.com 京ICP备13046642号
	</div>
</body>
</html>

CSS代码：

*{
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei UI";
}
a{
	text-decoration:none;
	color:white;
}
a:hover{
	color:pink;
}

/*header区*/
.header{
	height: 80px;
	background-color: #07cbc9;
	width:100%;
}
.header-right a{
	padding-right: 16px;
	line-height: 80px;
	font-weight: bold;
}
.header-left{
	float:left;
	margin-left: 80px;
	margin-top: 16px;
	
}
.header-right{
	float:right;
	margin-right: 80px
}

/*banner区*/
.banner{
	width:100%;
	height: 600px;
	position: relative;
}

.banner img{
	height: 600px;
	width:100%;

}
.mask{
	background-color: #000;
	width:100%;
	height: 600px;
	position: absolute;
	left:0;
	top:0;
	opacity:0.2;
}
	/*信息框区·banner区*/

.message{
	position: absolute;
	left:0;
	top:0;
	width: 509px;
	height:43px;
/*	opacity:0.2;*/
	z-index: 9;
	/*居中*/
	left:50%;
	margin-left: -254.5px;
	top:50%;
	margin-top: -193.5px;
	text-align: center;

}
input{
	outline:none; /* 清除默认样式*/
	background:none;/*清除默认样式*/
	background-color: transparent;
	border-width: 2px;
	/*border-color: transparent;*/
	border-color: grey;
	margin: 10px;
	color:white;
}
input:focus{
  	outline: none;/*清除默认样式*/
}
.name,.phone,.email{
	width: 505px;
	height:39px;
}
.other{
	width: 505px;
	height:115px;
}
.submit{
	width: 127px;
	height: 39px;

}
.name:hover,.phone:hover,.email:hover,.other:hover{
	border-color: #07cbc9;
}
.submit:hover{
	border-width: 0;
	background-color: #07cbc9;
}

/*about区*/
.about{
	width: 100%;
}
	/*about-top区*/
.about-top{
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
}
.about-top p{
	font-size: 64px;
	font-weight: bold;
}
.about-top hr{
	width: 40px;
	height: 2px;
	position: absolute;
	left: 50%;
	margin-left:-20px; 
	background-color: #07cbc9;

}
.about-top-word{
	line-height: 32px;
	color: grey;
}

	/*about-middle区*/

		/*middle通用*/
.about-middle{
	width: 100%;
	height: 380px;
	
}
		/*about-middle-中区*/
.about-middle-middle{
	height: 380px;
	width: 568px;
	margin: 0 auto;
	position: relative;

}
.about-middle-middle img{
	height: 380px;
	width: 568px;
	
}
		/*about-middle-左区*/
			/*ABOUT US*/
.about-middle-left-1{
	font-size:35px; 
	position: absolute;
	left:-230px;
	top:10px;
	text-align: center;
}
			/*透明遮罩*/
.about-middle-left-2{
	width: 328px;
	height: 204px;
	background-color: #ffffff;
	opacity:0.5;
	border-width: 1px;
	border-color: grey;
	border-style: solid;
	line-height: 25px;
	padding: 20px;
	position: absolute;
	top:120px;
	left:-230px;
	color: black;

}

.about-middle-left-3{
	width: 328px;
	height: 204px;
	line-height: 25px;
	padding: 20px;

	position: absolute;
	top:120px;
	left:-230px;
	color: black;
}
			/*透明遮罩里面的按钮*/
.about-middle-left-4{
	width: 82px;
	height: 25px;
	text-align: center;
	background-color: black;
	color: white;
	padding: 10px;
	line-height: 25px;
	position: absolute;
	top:300px;
	left:-200px;
}
		/*about-middle-右区*/
.about-middle-right-1{
	width: 176px;
	height: 82px;
	border-color: #07cbc9;
	border-style: solid;
	border-width: 1px;
	position: absolute;
	top: 0;
	right: -260px;
	padding: 30px;
	text-align: center;
	line-height: 45px;
	font-size:35px;

}
.about-middle-right-2{
	width: 176px;
	height: 82px;
	border-color: #07cbc9;
	border-style: solid;
	border-width: 1px;
	position: absolute;
	top: 180px;
	right: -260px;
	padding: 30px;
	text-align: center;
	line-height: 45px;
	font-size:35px;

}
		/*居中下划线，其实都全局适用*/
.about-middle-right-2 hr,.about-middle-right-1 hr{
	width: 40px;
	height: 2px;
	position: absolute;
	left: 50%;
	margin-left:-20px; 
	background-color: #07cbc9;

}
	/*about-bottom区*/
.about-bottom{
	width: 100%;
	height: 500px;
	margin-top: 80px;
	margin-bottom: 80px;
	background-color: pink;/*完成后删除*/
	overflow: hidden;
}
.about-bottom div{
	width:25%;
	height: 250px;
	background-color: #07cbc9;
	float: left;
	position: relative;
}

.about-bottom img{
	width:100%;
	height: 100%;
}
.about-bottom-word-h1,.about-bottom-word-h2{
	color:white;
}
.about-bottom-word-h3{
	color: LightGrey;
}
.about-bottom-word-h1{
	font-size: 27px;
}
.about-bottom-word-h2{
	font-size: 11px;
}
.about-bottom-word-h3{
	font-size: 5px;
}
.about-bottom-word-h1{
	position: absolute;
	top: 20px;
	left: 40px;
}
.about-bottom-word-h2{
	position: absolute;
	top: 60px;
	left: 40px;

}
.about-bottom-word-h3{
	position: absolute;
	top: 100px;
	left: 40px;

}
.about-bottom-botton{
	width: 82px !important ;
	height: 25px !important ;
	text-align: center !important ;
	background-color: black !important ;
	color: white !important ;
	padding: 10px !important ;
	line-height: 25px !important ;
	position: absolute;
	top:200px;
	left:50%;
	margin: -51px;
}

/*GALLERY区*/
.GALLERY{
	width: 100%;
	position: relative;
	height: 950px;
}
	/*GALLERY-top区*/
.GALLERY-top{
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
}
.GALLERY-top p{
	font-size: 64px;
	font-weight: bold;
}
.GALLERY-top hr{
	width: 40px;
	height: 2px;
	position: absolute;
	left: 50%;
	margin-left:-20px; 
	background-color: #07cbc9;

}
.GALLERY-top-word{
	line-height: 32px;
	color: grey;
}
		/*GALLERY-bottom区*/
.GALLERY-bottom{
	/*width:100%;*/  /*问题：为什么这里添加width：100%会出现滚动条？*/
	overflow: hidden;
	position: absolute;
	left:50%;
	margin-left:-600px; 
}
.GALLERY-bottom-big{
	width: 360px;
	height: 304px;
	background-color: pink;/*完成后删除*/
	float:left;
	margin:20px;
}
.clear{
	clear: both;
}
.GALLERY-bottom-big-photo{
	width: 360px;
	height: 240px;	
}
.GALLERY-bottom img{
	width: 100%;
	height: 100%;

}
.GALLERY-bottom-big-word{
	width: 360px;
	height: 64px;
	background-color: black;	
}
.GALLERY-bottom-big-word p{
	color:white;
	line-height: 64px;
	padding-left:16px;
}

/*页脚区*/
.footer{
	width: 100%;
	height: 80px;
	background-color: #07cbc9;
	color: #ffffff;
	text-align: center;
	line-height: 80px;
	margin-top: 30px;
}


写回答

2回答

好帮手慕慕子

2020-07-05

已采纳

同学你好，作业要求只有banner和about区域的图文混排区域宽度百分百

http://img.mukewang.com/climg/5f014f0b094b29c507450170.jpg

祝学习愉快~

0

好帮手慕慕子

2020-07-05

同学你好， 因为设置宽度百分百，默认铺满整个窗口，但是由于设置了left和margin-left属性值，会让元素向右移动，所以整个区域的内容超出了窗口宽度，出现横向滚动条。

建议：可以给大盒子设置固定的宽度（刚好等于子元素占据的宽度之和），然后结合margin属性的auto属性值实现水平居中效果。

http://img.mukewang.com/climg/5f0141e40916841307960299.jpg

这是一个项目作业，同学完成作业后，可以提交作业，批作业的老师会针对同学的完整代码给出详细的修改建议，并整理成文档发送给同学，方便同学查看与修改。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0
hocalhost999
h 但是这题题目要求宽度100%自适应
h020-07-05
共1条回复

0 学习 · 40143 问题

查看课程

相似问题

老师请问为什么我的代码会有横向滚动条

回答 2

回答 1

回答 3

为什么在gallery区域设置的黑色背景颜色会跑偏位置？

回答 2

这样写行么？

回答 1

打开慕课网App查看更多内容