Styling p so it appears inline

HTML & CSS
1

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

2

Get rid of the space in “p .sameline”

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

3

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.

4

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.

5

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

e.g.


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.

6

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