html - 如何将这两个放在同一行？（一个居中，一个右对齐）

Question

我正在尝试将两组不同的文本对齐到同一行。

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

我试图让这些在同一条线上。我以为跨度标签做到了，但事实并非如此。当我把它放在一个 div 中时，它会下降一行，我需要它在同一行上。

http://jsfiddle.net/MWDxC/

Answer 1

您需要将 display:inline 放在该 H2 标记上，因为它是默认的块元素。

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

或者您可以将整个跨度标签移动到 H2 内，这样也可以。

Answer 2

您需要一个包装元素，更改显示并设置一个浮点数。然后它将起作用。

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

Answer 3

如果你想保持<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;
}