Styling p so it appears inline

I tried styling a class (called sameline) applied to <p> so that it appears inline, but it didn’t work:

p .sameline {
display: inline;

html is:

<p class="sameline">

What am I doing wrong? (In case I am using the wrong terminology, I want the text in the <p> tag to appear on the same line as the preceding element.)

Get rid of the space in “p .sameline”

p.sameline means <p class=“sameline”>
p .sameline means <p><some-other-element class=“sameline”>

Thanks. That actually didn’t fix my problem, but it’s good to know. I found out that the div my text was in was block level element. I tried giving it an id and setting it to inline, but the text inside (along with the inline <p>) still did not go the same line as the previous element. I eventually tried a span, and that worked, but I was hoping to figure out why the div set to display: inline didn’t work.

The problem is probably that it is surrounded by block-level elements. If you have the following code:

<p>Here's one para</p>
<p style="display:inline;">Here's an inline para</p>
<p>Here's a third para</p>

the second paragraph looks like it’s block, because it’s sandwiched between two blocks, and it doesn’t just run on from the previous one.

As Stevie said it will work if you have it laid out correctly.


p,div { display:inline }

<div> Some text </div>
<p>more text</p>

That will form one line of text.

To make text run into two block elements then you need to make both the elements display:inline.

Thanks again Stevie, Paul. That does help, and I wasn’t aware of that attribute of display: inline in conjunction with surrounding items.