Question

好的，我目前正在使用这个网站http://www.katiesamsonlaxfest.com/preview.html。我想在页面的左下角添加一些联系信息（在内容区域下方，在背景的页脚导航的左侧）。我还希望能够将页脚导航保持在中心位置。有什么建议吗？

Answer 1

根据您的布局，最简单的方法可能是定位具有相对位置的东西。 IE - 在您的页脚div中，指定另外2个div。制作一个20％的宽度，第二个宽度为80％。将当前页脚放在div 2中，左对齐文本，然后调整百分比直到所有内容都很好地排列。

Answer 2

试试这个：

<div id="footer">
  <div id="left_footer">
    some content
  </div>
  <ul>
        <li><a href="http://www.katiesamsonlaxfest.com/index.html">Home</a></li> 
        <li><a href="">The Event</a></li> 
        <li><a href="http://www.katiesamsonlaxfest.com/design.html"> The Cause </a></li> 
        <li><a href=""> The Teams </a></li> 
        <li><a href=""> To Donate </a></li> 
        <li><a href=""> The Sponsors </a></li>
 </ul>
 <p> Copyright 2010, The Katie Samson Foundation</p>
</div>

我将页脚设置为相对位置，然后将新添加的div（left_footer）定位为绝对值，左侧为0px，顶部向下几个像素。

#footer
{
    position: relative;
}
#left_footer
{
    position: absolute;
    left: 0px;
    top: 28px;
}

在Firefox和IE8中看起来不错。

Answer 3

以下是我刚刚使用JSBin提出的内容：http://jsbin.com/exogi/edit

似乎可以完全按照您的要求进行操作，浮动，并且不会更改页脚文本的居中。需要注意的重要一点是，#footer上的边距为0（上下）（可以更改），左右边距等于#contact-info的宽度。在大多数浏览器中（我认为IE6和7不喜欢它）它应该可以很好地工作。

CSS定位问题

3 个答案: