0

美好的一天，我是 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 代码：

<!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>&#8594;&nbsp; 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>&#8594;<h4><a href="About.html">Read</a></h4>
    </div>
</div>

     <div id="our-benefits-section">
        <div id="our-benefits">
        <h3>&#8594;&nbsp; OUR BENEFITS</h3> 
        </div>  
        <div id="hr">
        <hr /> 
</div>

    <div id="content">

    <p>&#9745;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis nulla id orci malesuada porta posuere quis massa. </p>

    <p>&#9745; Nunc vitae purus non augue scelerisque ulitricies vitae et velit. Sed vitae lectus id sem lobortis scelerisque. Praesent eget consequat</p>

    <p>&#9745;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>&#8594;&nbsp; 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>&#8594;&nbsp; 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>&#8594;&nbsp; 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> &#8594;&nbsp;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>&copy; 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;}
4

4 回答 4

0

由于您只发布了没有 HTML 代码的 CSS 代码，人们可能很难看到整个问题，但根据您发布的信息，这将是我建议的解决方案，

这个CSS代码：

width:960px;

使您的 HR 具有 960 像素的固定宽度。

这个CSS代码：

width:70%;

使您的 HR 占据其容器宽度的 70%。

您可以尝试将宽度设置为 100%。

ps 为什么你需要它是 70% ？

于 2013-09-10T05:59:07.157 回答
0

如果您已经有了更好的解决方案，请忘记此消息，

但我注意到了一些事情。

根据你的代码

#hr { 
width: auto;  
margin: 0px auto; 
color:#C0C0C0; 
height: 12px; 
margin-bottom:15px; 
overflow:hidden;}

由于 Wrapper 的 id 为 960 像素，因此请使用该宽度模板来设置 HR 的宽度值。

所以改变：

width: auto;

至

width: 958px;

注意：960px 看起来有点太长了，所以我剃掉了一些像素以适应对齐方式。但如果960看起来更好，那就选择960。

于 2013-09-10T17:16:56.467 回答
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 行可能会被另一个标签覆盖

于 2013-09-10T06:56:05.350 回答
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" />

希望这能回答你的问题。

于 2013-09-10T05:56:42.403 回答