美好的一天我是CSS的新手
最近在完成我的第一个项目后，我的页面上出现了一个额外的空白区域，然后我发现我使用的hr标签是有额外空白区域的一个原因（我猜？ ），当我把hr尺寸
#hr{
width:960px;
margin: 0px auto;
color:#C0C0C0;
height: 12px;
margin-bottom:15px;
overflow:hidden;
}
将出现白页
但是当我把
#hr {
width:70%;
margin: 0px auto;
color:#C0C0C0;
height: 12px;
margin-bottom:15px;
overflow:hidden;
}
这没关系，但放大/缩小会移动hr线，
如果需要，我会发布代码，但我的代码太多......
是的，我觉得生病了我的代码，
HTML CODES：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beginner</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
</style>
</head>
<body>
<div id="top-most">
</div>
<div id="wrapper">
<div id="logo">
<img alt="logo" src="images/logo.png" />
</div>
<div id="header">
<p>info@CreativeStudio.com</p>
</div>
<div id="top-bar-selection" >
<ul>
<li>HOME</li>
<li><a href="about.html"> ABOUT US </a></li>
<li><a href="portfolio.html"> PORTFOLIO </a></li>
<li><a href="services.html"> SERVICES </a></li>
<li><a href="blog.html"> BLOG </a></li>
<li><a href="contact.html"> CONTACT US </a></li>
</ul>
</div>
</div>
<hr id="hr" />
<div id="banner">
<object id="flash1" data="Beginner.swf" type="application/x-shockwave-flash" style="width: 960px; height: 380px">
<param name="movie" value="Beginner.swf" />
</object>
</div>
<div id="hr2">
<hr />
</div>
<div id="information">
<div id="about-us-section">
<div id="about-us">
<h3>→ ABOUT US</h3>
</div>
<div id="hr">
<hr />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
<p style="height: 3px"></p>→<h4><a href="About.html">Read</a></h4>
</div>
</div>
<div id="our-benefits-section">
<div id="our-benefits">
<h3>→ OUR BENEFITS</h3>
</div>
<div id="hr">
<hr />
</div>
<div id="content">
<p>☑Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. </p>
<p>☑ Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat</p>
<p>☑Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. </p>
</div>
</div>
<div id="testimonials-section">
<div id="testimonials">
<h3>→ TESTIMONIALS</h3>
</div>
<div id="hr">
<hr />
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
<h5>Rafi, Graphicsfuel.com</h5></div>
</div>
</div>
<div id="hr">
<hr />
</div>
<div id="our-portfolio-section">
<div id="our-portfolio">
<h3>→ OUR PORTFOLIO</h3>
</div>
<img alt="PortfolioA" src="images/Portfolio A.jpg" id ="picA" />
<img alt="PortfolioB" src="images/Portfolio B.jpg" id ="picB"/>
<img alt="PortfolioC" src="images/Portfolio C.jpg" id ="picC"/>
<img alt="PortfolioD" src="images/Portfolio D.jpg" id ="picD"/>
</div>
<div id="hr">
<hr />
</div>
<div id="information2">
<div id="blog-updates-section">
<div id="blog-updates">
<h4>→ BLOG UPDATES</h4>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat libero.</p>
</div>
</div>
<div id="socialmedia">
<h6> → CONNECT WITH US</h6>
<img alt="" src="images/Icon/Twitter.png" />
<img alt="" src="images/Icon/Facebook.png" />
<img alt="" src="images/Icon/Flickr.png" />
<img alt="" src="images/Icon/RSS.png" />
</div>
</div>
<div id="footerbgcolor">
<div id="footer">
<div class="below-bar-selection">
<p>Home | <a href="about.html">About Us</a> | <a href="portfolio.html">Portfolio</a> | <a href="services.html">Services</a> | <a href="blog.html">Blog</a> | <a href="contact.html">Contact Us</a></p>
<p>© 2010 CreativeStudio. All Rights Reserved</p>
</div>
<div class="logo-small" style="left: 770px; top: 1240px; width: 128px">
<img alt="" src="images/Icon/Logo%20Small.png" />
</div>
</div>
</div>
</body>
</html>
CSS代码：
#top-most { background-color:black; height:17px; }
#wrapper { width :960px; height:130px ; margin:0px auto; background-color: #F4F4F4; overflow:hidden; }
#logo { margin: 19px 0 0 10px; float:left; }
#header { float: right; margin: 19px 3px 0 0; }
#header p { color: #979899; }
#top-bar-selection { width:960px;position :absolute ; overflow:hidden; display:inline-block; margin:70px auto 0 -160px; word-spacing:1px; letter-spacing:1px;}
#top-bar-selection ul{color:orange; text-align: right; }
#top-bar-selection ul li {display :inline; font-size:12px; font-family: arial black; margin: 0 32px 0 0;}
#top-bar-selection ul li a:link {color: #fe9a00; font-family: Arial black; }
#top-bar-selection ul li a:hover {color: #000000; font-family: Arial black; }
#hr { width: auto; margin: 0px auto; color:#C0C0C0; height: 12px; margin-bottom:15px; overflow:hidden;}
#hr2 { width:960px; margin: 0px auto ; margin-top:10px; height:9px;}
#banner { width:960px; height:380px ; margin:0px auto; background-color: black; }
#information { width:960px; margin :0px auto 0 auto; height:235px; padding-top : 15px; margin-top:13px; }
#about-us-section { width: 266px; margin-right: 600px; background-color: #F4F4F4; position:absolute; padding-right: 10px; }
#about-us-section hr { background-color:black; height:7px; width:260px; margin:10px 0 0 0; position:absolute; }
#about-us-section p { padding-top: 10px; font-weight:lighter;}
#about-us-section h4 { color:#FF9933; display:inline; line-height:30px;}
#about-us-section h4 a:link {color: #fe9a00; font-family: Arial black; }
#about-us-section h4 a:active {color: #fe9a00; font-family: Arial black;}
#about-us-section h4 a:visited {color: #fe9a00; font-family: Arial black;}
#about-us-section h4 a:hover { color:#000000; }
#our-benefits-section { width: 270px; margin: 0 0 0 355px; background-color : #F4F4F4; position:absolute; padding-right: 10px;}
#our-benefits-section hr { background-color:black; height:7px; width:260px; margin:10px 0 0 0; position:absolute; }
#our-benefits-section p { padding-top: 10px; }
#testimonials-section { width: 270px; margin: 0 0 0 700px; position:absolute; padding-right: 10px; }
#testimonials-section hr { background-color:black; height:7px; width:260px; margin:10px 0 0 0; position:absolute; }
#testimonials-section p { padding-top: 10px; font-weight:300; }
#testimonials-section h5 { padding-top: 10px; font-style:italic; }
#our-portfolio-section { width:960px; margin: 0px auto 0 auto; display: block; height:205px; }
#our-portfolio-section our-portfolio { margin: 5px 2px 0 0; }
#our-portfolio-section img { padding: 15px; display:inline;}
#information2 { width:960px; margin :0px auto 0 auto; height:145px; margin-top:5px; }
#blog-updates-section { width:600px; height:50px; position:absolute; }
#blog-updates-section h3 {margin: 8px 5px 0 0; line-height:10px;}
#blog-updates-section p {margin: 28px 5px 0 0; }
#blog-updates .content { margin: 28px 5px 0 0; float:left; position:absolute;}
#socialmedia { float:right; overflow:hidden; position:absolute;margin: 10px 720px; width: 150px; height: 125px; width:200px;}
#socialmedia h6 { font-size:10px;}
#socialmedia img { padding: 6px; margin-top:20px; }
#footerbgcolor { background-color:#E2E2E2; height:100px; }
#footer { width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#footer .below-bar-selection { margin: 30px 0 0 20px; float:left; width: 750px; }
#footer a:link {color: #000000; font-family: Arial black; }
#footer a:active {color: #000000; font-family: Arial black;}
#footer a:visited {color: #000000; font-family: Arial black;}
#footer h4 a:hover { color:#000000; font-family:Arial black;}
#footer .logo-small { float:right; padding-top: 15px;}
答案 0 :(得分：0)
首先，我看不到页面右侧有任何空白区域，而是由于你给出的高度而在hr标签之间留出空格。
其次，
hr标签会自动创建一条线。如果你想给它一个id，这意味着你想要为hr元素添加额外的样式。
如果我理解得当，你甚至不应该使用WIDTH。
#hr{
// no need to use width as it will automatcally fill it self
margin: 0px auto;
color:#C0C0C0;
height: 12px; // only needed if you want to create space inbetween
margin-bottom:15px;
overflow:hidden;
}
并将其用作
<hr id="hr" />
希望这能回答你的问题。
答案 1 :(得分：0)
由于您只发布了没有HTML代码的CSS代码，人们可能很难看到整个问题，但根据您发布的信息，这将是我提出的解决方案，
这个css代码：
width:960px;
使您的HR固定宽度为960像素。
这个css代码：
width:70%;
使你的HR占据容器宽度的70％。
您可以尝试将宽度设置为100％。
P.S。为什么你需要70％？
答案 2 :(得分：0)
hr { //remove # so it will apply to <hr> tag
width:70%;
margin: 10px auto; // change the margin size so the hr line can be seen
color:#C0C0C0;
margin-bottom:15px;
overflow:hidden;
}
我认为可以删除hr线的问题只是边缘。如果边距设置为0，则hr行可以被另一个标记覆盖
答案 3 :(得分：0)
如果您已经有了更好的解决方案，请忘记此消息，
但我注意到了一些事情。
根据您的代码
#hr {
width: auto;
margin: 0px auto;
color:#C0C0C0;
height: 12px;
margin-bottom:15px;
overflow:hidden;}
由于你的Wrapper的id为960像素， 使用该宽度模板设置您的HR＆＃39;宽度值。
所以改变：
width: auto;
到
width: 958px;
注意：960px看起来有点太长了，所以我刮了一些像素以适应对齐。但如果960看起来更好，那么选择960。