Question

所以我正在编写我的最终HTML项目，当格式化图片时，我不小心把它放到了右边，它水平扩展了我的网页，现在我已经修复了图像，那里有很多额外的空间。右边。同样的事情是纵向发生的，但是我只是将我的身高标记设置为100％并且它处理了它，我尝试用宽度做这个，但它只是缩小我的内容而不改变网页的物理尺寸。我很感激你们提供的任何帮助。这是网页enter image description here

的图片

这是代码

＆＃13;

<html>
<title> Bodybuilding </title>


<head>
<style>

.image1 {
	z-index: -1;
	
}

.active {
	background-color: #000000
}

.image2 {
	position: absolute;
	right: 26px;
	top: 10px;
}
.title {
	position: relative;
	top: -250px;
	border-style: solid;
	border-color: #0E878A;
	font-size: 49.5px;

}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	top: -245px;
	background-color: #333;
	border-top: 2px solid #bbb;
	border-left: 2px solid #bbb;
	border-bottom: 2px solid #bbb;
	border-radius: 10px;
}
li {
	float: left;
	border-right: 2px solid #bbb;
	
	
}

li a {
	display: inline;
	color: #0E878A;
	text-align: center;
	padding: 15px;
	text-decoration: none;
	font-size: 35px;
}
li a:hover {
	background-color: #111;
}

h2 {
	position: relative;
	top: -797px;
}

p {
	position: relative;
	top: -797px;
	font-size: 30px;
}

.arnold {
	position: relative;
	left : 1130px;
	top: -235px;


}

body {
	background: linear-gradient(#939FA0,#41858B);
	height: 100%;
	width: 98.27%;

}

h3 {
	position: relative;
	top: -765px;


</style>
</head>

<div class="image1">
	<img src="bbifbb.png" width="359" height="250">
</div>
<div class="image2">
	<img src="bbphil.jpg" width="359" height="250">
</div>

<div class ="title">
<center>
<h1> Bodybuilding </h1>
</center>
</div>

<body bgcolor="#939FA0">

<body>

<ul>
	<li><a class = "active" href="bbfinal.html">Home</a></li>
	<li><a href="bbfamous.html">Famous Bodybuilders</a></li>
	<li><a href="bbolympia.html">Mr. Olympia</a></li>
	<li><a href="bbsteroids.html">Steroids</a></li>
	<li><a href="bbmodern.html">Modern Bodybuilders</a></li>
	<li><a href="bbcompetitions.html">Competitions</a></li>
	<li><a href="bbimagemap.html">Find Competitions</a></li>
	<li><a href="bbcontact.html">Contact Me</a></li>
	

</ul>

<div class ="arnold">
<img src="bbarnold.jpg">
</div>

＆＃13;

Answer 1

您在代码中执行以下操作：

.arnold {
    position: relative;
    left : 1130px;
    top: -235px;
}

由于该位置是相对的，因此left属性使用class＆＃39; arnold＆＃39;设置所有元素的左边缘。在他们正常位置的右边1130像素。这会导致额外的滚动空间到右边。

如何修复HTML网页的宽度

1 个答案: