html右侧的额外空间？答案

【问题标题】：Extra space on right of html?html右侧的额外空间？
【发布时间】：2015-03-18 23:35:09
【问题描述】：

<!DOCTYPE html>
<html>
<head>
  <title>Risebush|home</title>
</head>

<body bgcolor=linear-gradient(#82FA58, #21610B), >
<div style="color:#61B329">
<div id="header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Become a Member</li>
<li>Contact Us</li>
<li>Games</li>
<li>Movies</li>
</ul>
</div>
  <h1 align="center", style="font-family:cursive"><font size="7">Risebush Website</font></h1>
</div>
</div>
  <p style="font-family:cursive">Risebush is awesome! We do things and stuff. We have lots of employees working for us and are rolling in the cash as you read this!</p>
<p style="font-family:cursive">$$$$$ = life</p>
<img src="http://previews.123rf.com/images/pamparam/pamparam0705/pamparam070500006/908484-Rainbow-over-the-green-meadow-and-multicolored-bush-in-bloom-Stock-Photo.jpg" alt="Rainbow over a bush" style="width:304px;height:228px">
<div style="color:#21610B" >
<p></p>
<a href='#' class='button'>Become a member!</a>
</div>
<div style="color:#21610B">
<h1 align="center", style="font-family:cursive"><font size="5">Games</font></h1>
</div>
<p></p>
<div align="center"><embed src="http://www.classicgamesarcade.com/games/flappybirdflash.swf" width="475px" height="665px" autostart="true" loop="false" controller="true"></embed><br /><a href="http://www.classicgamesarcade.com/game/21741/flappy-bird-game.html">Play Flappy Bird</a></div>
<div id="footer">
<p>&copy2011 Risebush, Azhi Guore</p>
<p>All rights reserved. You may not claim to own Risebush, in any way, shape, or form, or claim that you created this website in any way possible, all rights go to the Risebush Company, owned by Azhi Guore.</p>
</body>

<style media="screen" type="text/css">

.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 14.5px 29px;
   -webkit-border-radius: 22px;
   -moz-border-radius: 22px;
   border-radius: 22px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 21px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }
#footer{
    clear: both;
    position: relative;
    bottom: -20px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    height: 95px;
    background-color: #3c4543;
}

#navbar {
        position:relative;
    margin-left:-350px;
    top:144px;
    left:50%;
}

#header {
    position:relative;
    top: -50px;
    background-color: #3c4543;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
ul{
    list-style-type: none;
    position: relative;
    margin: 50px;
}

li {
    display: inline;
    border: 2px solid #000000;
    font-family: Futura, Tahoma, sans-serif;
    color: #ffffff;
    padding: 5px;
    border-radius: 5px 5px;
    background-color: #cc0323
}
</style>

</html>

网站看起来还不错，但页面右侧有一个巨大的空间。但是，我的编码中没有任何宽度参数，所以我不知道是什么可能导致了那个巨大的空间。有没有办法可以在不破坏网站布局的情况下删除它？你知道可能是什么原因造成的吗？感谢您的帮助。

【问题讨论】：

@ASGM 小心：jsfiddle 不能替代包含代码的问题。这是一个非常有用的补充。
CSS 应该在<head> 中。 @ASGM 单独的 CSS 文件是个坏建议。将它放在一个单独的文件中会延迟开始渲染，直到检索到 CSS 文件。 HTTP 请求-响应通常为 200-500 毫秒。而这个 2.8KB CSS 的传输时间不到 1ms。

标签： html css space

【解决方案1】：

当我在野外检查你的代码时，我看到的唯一空间是 HTML body 元素的默认边距。尝试将body { margin: 0; } 添加到您的样式表中。

【讨论】：

【解决方案2】：

问题在于relative position 或#navbar。只需删除position:relative，它就会从右侧删除巨大的空间。然后你需要调整 #navbar 的位置，方法是调整 margin-left 是 -350px 和所有其他必要的属性。

【讨论】：