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

Question

I am trying to align two different sets of text to be on the same line.

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

I'm trying to have these on the same line. i thought the span tag did it, but it doesnt. when i put it in a div, it goes down a line, i need it on the same line.

http://jsfiddle.net/MWDxC/

Answer 1

You need to put display:inline on that H2 tag since it's a block element as default.

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

Or you could just move the entire span tag inside the H2 and that would work as well.

Answer 2

You need a wrapping element, change the display and set a float. Then it will work.

<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

If you want to keep the <h2> centered and the <span> on the right - 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;
}