HTML右边是否有多余的空间？
[英]Extra space on right of html?
问题描述
<!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>©2011 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>
The website looks fine as is, but there is a gigantic space on the right side of the page. 
该网站看起来不错，但页面右侧有一个巨大的空间。 However, I don't have any width parameters in my coding, so I don't know what could have possibly caused that gigantic space. 但是，我的编码中没有任何宽度参数，所以我不知道是什么原因导致了这个巨大的空间。 Is there a way that I can remove it without ruining the website layout? 有没有一种方法可以删除它而不破坏网站布局？ Do you know what may have cause it? 您知道可能是什么原因吗？ Thanks for your help. 谢谢你的帮助。
2 个解决方案
解决方案1
0 2015-03-18 23:50:47
The only space that I see when checking your code out in the wild is from the default margin of the HTML body element. 我在野外检查代码时看到的唯一空间是HTML正文元素的默认边距。 Try adding body { margin: 0; } 尝试添加body { margin: 0; } body { margin: 0; } to your stylesheet. body { margin: 0; }到您的样式表。
解决方案2
0 2015-03-19 00:06:08
The problem is with relative position of #navbar . 问题在于#navbar relative position 。 Just remove the position:relative and it will remove the gigantic space from right side. 只需移除position:relative ，它将从右侧移除巨大的空间。 And then you need to adjust the position of your #navbar by adjusting margin-left which is -350px and all other necessary properties. 然后，您需要通过调整-350px的margin-left和所有其他必要的属性来调整#navbar的位置。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.