每当我放大时，我的网页右侧有一个奇怪的空间。空间变大了。谁能帮我摆脱它。
这是我的 html:
<html>
<head>
<title>thesis</title>
<link rel = "stylesheet" href = "styles and pics/index.css">
</head>
<body>
<div id = "outer_wrapper">
<header>
<section>
<input type = "text" id = "username" name = "username" class = "text" placeholder = "E-mail"/>
<input type = "password" id = "password" name = "password" class = "text" placeholder = "Password"/>
<input type = "submit" id = "submit_login" name = "submit_login" class = "submit" value = "login"/>
</section>
</header>
<footer>
footer
</footer>
</div>
</body>
这是我的CSS:
*{ padding:0px; margin:0px; }
body{ text-align:center;}
#outer_wrapper{ width:100%; height:700px; background-color:yellow; position:relative;}
header{ background-color:blue;height:70px;display:block;position:absolute;top:0px;width:100%;}
header section{ position:relative;top:20px;left:120px;}
.text{ height:25px;width:200px;padding-left:5px;}
#submit_login{height:25px;width:70px;background-color:green;border:0px;outline:none;cursor:pointer;color:white;}
.text,#submit_login{ margin-left:10px;}
footer{background-color:blue;height:40px;position:absolute;bottom:0px;width:100%;}
最佳答案
section { left: 120px; 导致了这个问题。默认情况下，section 继承 width: 100%，因此将它向左移动会使总宽度增加 120px。
假设您希望标题部分向左偏移 120 像素，至少有两种方法可以解决此问题:
- 更改
部分 { left: 120px; }到部分 { margin-left: 120px;或 - 将
overflow: hidden;添加到标题元素，即header { overflow: hidden; }
否则只需删除 left: 120px;
关于html - 我网页右侧的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25375931/