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

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

如果您不反对稍微改变您的 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 的中心 - 这样您的页脚内容将保持与主要内容包装器的边缘。

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

希望对您有所帮助!如果您有任何问题，请告诉我。