如何把這兩個放在同一條線上？ （一個居中，一個右對齊）

Question

我想對齊兩個不同的文本集合在同一行上。

<h2 style="text-align:center">Only $4 for first-class shipping on all orders!</h2><span style="text-align:right">test</span>​ 

我試圖讓這些在同一行上。我認爲span標籤做到了，但它沒有。當我把它放在一個div中時，它會沿着一條線，我需要它在同一條線上。

http://jsfiddle.net/MWDxC/

Answer 1

如果你想保持<h2>中心和右側的<span> - http://jsfiddle.net/MWDxC/3/

<header> 
    <h2>Only $4 for first-class shipping on all orders!</h2> 
    <span>test</span> 
</header> 

header { 
    position: relative; 
} 

h2{ 
    text-align: center; 
} 

span { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

Answer 2

你需要把顯示：內聯對H2標籤，因爲它是作爲默認塊元素。

http://jsfiddle.net/MWDxC/2/

或者你可以只移動H2的內部整個跨度標籤，並且將正常工作。

Answer 3

您需要包裝元素，更改顯示並設置浮動。然後它會工作。

<div style="text-align:center;"> 
    <h2 style="display:inline;" >Only $4 for first-class shipping on all orders!</h2> 
    <span style="float:right; display:block;">test</span> 
</div>