如何在不创建两条单独线的情况下将h3与ap对齐？

Question

I have html code that looks like this:

<h3>Corruption, the most infallible symptom of constitutional liberty.</h3>
<p>~ Edward Gibbon</p>

The resulting output is below:

As I pointed out w/ the arrow, I don't want Edward Gibbon below the quote, but preferably to the right of "liberty".

Is this possible, if I have h3 tags involved? Should I be using span or div tags? Any guidance would be greatly appreciated!

---

Updated solution in case anybody needs this in the future (via Greg Jennings):

<h3>Corruption, the most infallible symptom of constitutional liberty. <span 
class="parastyled" style="font-size: 10px;">~ Edward Gibbon</span></h3>

The resulting output is below:

Answer 1

Just make them inline!

h3, p{ 
    display: inline;
} 

Note, you probably don't want this to affect all p's and h2's so i'd do this:

<div class="same-line">
    <h2>blah balh</h2>
    <p>blah</p>
</div>

CSS:

.same-line p, .same-line h2{
    display:inline;
}

Answer 2

You can change the display type of the p and h3 tags

HTML:

<h3 class="sameline">Corruption, the most infallible symptom of constitutional liberty.</h3>
<p class="sameline">~ Edward Gibbon</p>

CSS:

<style type="text/css">
        .sameline {
            display: inline;
        }
    </style>

Answer 3

You should use the correct tools for the job.

This is a quote, it belongs in a blockquote :

http://jsfiddle.net/2a2S9/

HTML:

<blockquote>
    <p>Corruption, the most infallible symptom of constitutional liberty.</p>
    <p class="byline">~ Edward Gibbon</p>
</blockquote>

CSS:

blockquote { font-weight: bold;
    font-size: 20px; }

blockquote p { display: inline-block; }

blockquote p.byline { font-weight: normal;
    font-size: 12px; }

Answer 4

Use a span inside the tag with the style you want. You need an inline element here.

<h3>Corruption, the most infallible symptom of constitutional liberty. <span class="parastyled">~ Edward Gibbon</span></h3>

Answer 5

<h3> is a block element, it will use all the available width. You could use a span inside the h3 instead of the p . Or you could replace the h3 with an inline element.

Answer 6

p {

 display:inline;
 float:none;

}

Answer 7

try the following css

h3,p{ 
    float:left;
    width:auto;
}