如何把这两个放在同一条线上？ （一个居中，一个右对齐）

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

你需要将display：inline放在H2标签上，因为它是一个默认的块元素。

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

或者你可以在H2中移动整个span标签，这样也可以。

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