Question

我试图将固定页脚中的文本与站点容器的左边缘对齐，而不是将页脚左边缘对齐。页脚在左侧和底部绝对位于0px。

这是我的Sass代码：

#neo_container {background: #000; width: 960px; height: 100%; margin: 0 auto; }

#neo_footer_container { 
        position: fixed;
        bottom: 0px;
        left: 0px;
        height: 35px;
        width: 100%;
        z-index: 10000;
        background: #666;
        color: #FFF;

        .neo_footertext{float: left; margin-right: 400px; font: 11pt Arial, Helvetica, sans-serif;} /* Formatting for copyright text in fixed footer */
        .neo_footertext2{font: 11pt Arial, Helvetica, sans-serif;}  /* Formatting for Neoscape text in fixed footer */

    }

可以在此处查看HTML和CSS：http://jsfiddle.net/maW8E/

Answer 1

此处：删除float：left

 .neo_footertext{
   float: left;  //Remove this
   margin-right: 400px; // I would also remove this, unless you have a reason to put it in.
}

Answer 2

如果您不想改变HTML，可以添加一个内部包装器，其宽度与您尝试对齐的容器相同。因此，页脚的HTML可能看起来像（注意在内容周围添加.inner-wrap：

<div id="neo_footer_container">
    <div class="inner-wrap">
        <p class="neo_footertext">469 SEVENTH AVE NEW YORK NY 10018 Privacy Policy | Legal Statement | Disclaimer</p>
        <p class="neo_footertext2">Designed by Neoscape</p>
        <!--Placeholder for 'Designed by Neoscape' logo-->
    </div>
</div>

然后，在.neo_footertext上删除这两种CSS样式：

#neo_wrapper .neo_container #neo_footer_container .neo_footertext {
    float:left;
    margin-right:400px;
}

将这些内容添加到样式.inner-wrap：

#neo_wrapper .neo_container #neo_footer_container .inner-wrap{
    width:960px;
    margin:0 auto;
}

现在，您最终应该使用与#neo_wrapper相同宽度的内部容器，以#neo_footer_container为中心 - 这样您的页脚内容将保持与主内容包装器的边缘对齐。< / p>

这是一个updated JSFiddle来演示代码的工作原理。

希望这有帮助！如果您有任何问题，请告诉我。

将固定页脚中的文本与容器对齐

2 个答案: