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

问题是来自CSS文件的以下内容：

footer {
    ...
    width:100%;
    ...
}

这会导致您的页脚块在整个屏幕宽度上拉伸。由于文本居中，您无法分辨，但如果文本较长，它也会超出灰色部分的边界。

只需将width设置更改为灰色背景的像素宽度（如果需要填充，则更小），您的问题就会得到解决。例如，假设它是950像素：

footer {
    ...
    width:950px;
    ...
}

修改

由于您还使用了绝对定位，因此在进行此更改后，您可能会遇到以footer为中心的问题。查看此问题以获得可能的解决方案：How to center absolutely positioned element in div?或不要使用position: absolute并添加margin: 0 auto;以将footer与水平中心对齐。

Answer 2

虽然我不建议为您的页脚使用绝对定位。这是您的代码的解决方案。位置绝对中断了文档正常流程中的元素。

这里的解决方案使页脚与容器的75％相同，然后重新定位，边距为左，边距为右。

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;
}

页脚小时跨越整个页面，我该如何修复？

2 个答案: