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

我希望将以下文本和链接放在同一行上，文本“由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%; 
}

来源

2013-06-28 David Tunnell

你只能申请['文本align'（http://www.w3.org/TR/CSS21/text.html#alignment-prop ）在块级元素上，所以在'＃footer_container'上使用它。 – Adrift

你不需要用span来包装你的链接来浮动它。 –

应用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。

来源

2013-06-28 15:06:04

谢谢，这工作。但是，当我将margin-right应用于返回顶部链接时，它也会移过由xyz文本创建的边界。我如何防止这种情况发生？ –

@DavidTunnell，这是预期的（正常）行为。为了适应，只需在“xyz”文本中添加一个匹配的负边距即可。 http://jsfiddle.net/Ge465/ –

试试这个：

#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

来源

2013-06-28 15:04:45 karthikr

谢谢，这工作。但是，当我将margin-right应用于返回顶部链接时，它也会移过由xyz文本创建的边界。我如何防止这种情况发生？ –

有点乱七八糟，但看看[这些行]（http://jsfiddle.net/KtEhK/2/）。更简单的方法（这也是一种攻击）是为第一个跨度添加负边距。 – karthikr

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

#footer_container 
{ 
    text-align:center 
}

来源

2013-06-28 15:07:12 Ani

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

回答

相关问题