html - 文本和链接不会在同一行正确对齐

Question

我希望以下文本和链接位于同一行，文本“XYZ 制造”居中，返回顶部链接位于右侧。我究竟做错了什么？

<div id="footer_container">
    <span style="text-align: center">Made by XYZ</span>
    <span style="float: right"><a href="#top">Return to Top</a></span>
</div>

这是 div 容器代码：

#footer_container
{
    background: #7fc041;
    bottom: 0;
    height: 1.9em;
    left: 0;
    position: fixed;
    width: 100%;
}

Answer 1

将 应用text-align:center到您的页脚而不是跨度（只有块级元素支持此属性）。此外，您不需要跨度来浮动锚标记：

HTML

<div id="footer_container">
    <span>Made by XYZ</span>
    <a href="#top" style="float: right">Return to Top</a>
</div>

CSS

#footer_container
{
    background: #7fc041;
    bottom: 0;
    height: 1.9em;
    left: 0;
    position: fixed;
    width: 100%;
    text-align:center
}

这是一个工作小提琴。

Answer 2

试试这个：

#footer_container
{
    background: #7fc041;
    bottom: 0;
    height: 1.9em;
    left: 0;
    position: fixed;
    width: 100%;
    text-align: center
}

<div id="footer_container">
    <span>Made by XYZ</span>
    <span style="float: right"><a href="#top">Return to Top</a></span>
</div>

检查小提琴

Answer 3

http://jsfiddle.net/8NLeN/ 在css中添加这个：

#footer_container
{
   text-align:center
}