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应用于页脚而不是跨度（only block level elements support this property）。此外，您不需要跨度来浮动锚标记：

<强> 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
}

这是a working fiddle。

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>

检查the fiddle

Answer 3

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

#footer_container
{
   text-align:center
}

文本和链接将无法在同一行上正确对齐

3 个答案: