文章/答案/技术大牛

发布

社区首页 >问答首页 >页脚中的hr贯穿整个页面，我该如何修复？

问页脚中的hr贯穿整个页面，我该如何修复？
EN

Stack Overflow用户

提问于 2014-07-03 06:07:30

回答 2查看 1.1K关注 0票数 0

我在我的脚上放置的水平线有问题。我的头上还有一个，但效果很好。当我把页脚贴在页面底部时，问题就开始了。横线显示在屏幕上，而不仅仅是在容器中。

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

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-07-03 06:17:23

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

这里的解决方案使页脚与容器相同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;
}

票数 1

Stack Overflow用户

发布于 2014-07-03 06:11:47

问题是CSS文件中的以下部分：

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

这将导致您的页脚块延伸到屏幕的整个宽度。因为文本是居中的，所以你无法分辨，但是如果文本更长，它也会延伸到灰色部分的边界之外。

只需将width设置更改为灰色背景的像素宽度(或更小，如果您需要一些填充)，您的问题将得到解决。例如，假设它是950像素：

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

编辑

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24546103

复制

相似问题

问页脚中的hr贯穿整个页面，我该如何修复？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页脚中的hr贯穿整个页面，我该如何修复？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问页脚中的hr贯穿整个页面，我该如何修复？
EN