文本和鏈接不會在同一行上正確對齊

我希望將以下文本和鏈接放在同一行上，文本「由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

文本和鏈接不會在同一行上正確對齊

回答

相關問題