html - hr 在页脚中横跨整个页面，我该如何解决？

Question

我在页脚中放置的水平线有问题。我的标题上有另一个，但它工作正常。当我将页脚粘贴到页面底部时，问题就开始了。水平线显示在整个屏幕上，而不仅仅是在容器中。

CSS:

footer {
text-align:center;
clear:both;
color:#B05510;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}

#mcp {
width:175px;
-webkit-transition: width .5s;
margin:10px;


}
#mcp:hover {
transition: width .5s;
width:225px;
}

HTML:

<footer>
<hr>
<p>Copyright &copy sourceblockmc.net 2014 - All Rights Reserved<br>
<a href='https://clients.mcprohosting.com/aff.php?aff=8566'><img id='mcp'          
src='images/mcp.png'</a></p>
</footer>

发行图片:http://gyazo.com/3aeede809cffb0b6cc748b5ddf2efe8a

Answer 1

尽管我不建议对页脚使用绝对定位。这是您的代码的解决方案。绝对位置将元素从文档的正常流中分离出来。

此处的解决方案使页脚与容器相同 75%，然后将其重新居中，并设置 margin-left 和 margin-right。

footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}