Question

我的网页右侧有一个奇怪的空间，每当我放大时，空间就会变大。有人可以帮我解决这个问题。

这是我的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%;}

Answer 1

section { left: 120px; }导致了这个问题。默认情况下，该部分继承width: 100%，因此将其向左移动会将120px添加到总宽度。

假设您希望标题部分向左偏移120px，至少有两种方法可以解决问题：

将section { left: 120px; }更改为section { margin-left: 120px; } 或
将overflow: hidden;添加到标题元素，即header { overflow: hidden; }

否则只需删除left: 120px;

Answer 2

删除左：120px：＆＃34;标题部分{position：relative; top：20px; left：120px;}＆＃34; 应该是＆＃34; {position：relative; top：20px;}＆＃34;。

我网页右侧的空格

2 个答案: