p style=display:inline trouble

Question

I'm trying to create a list, with each <li> on one row. My problem lies at 'Food 4,' where I need to have a note describing the <h4>; I can't seem to clear the line break created by the <p>. I've tried <p style="display:inline> and every variation I could think of. What am I missing?

<div id="carte">
        <h3 class="list-title">Menu a la carte</h3>
        <ul>
            <li><h4>Food 1 $20</h4></li>
            <li><h4>Food 2 $30</h4></li>
            <li><h4>Food 3 $40</h4></li>
            <li><h4>Food 4 $50</h4><p>vegetarian</p></li>
            <li><h4>Food 5 $60</h4></li>
        </ul>
    </div>

Solution 1

You want both the h4 and p to be display:inline. h4 is by default, display:block so it'll take up the whole line. Same goes for p. We can set both of them to inline because the li is displayed as block as well. So everything inside the li is inline but each list item is still displayed as block.

h4, p {
    display: inline;
}​

See demo here

Solution 2

Do you want h4 and p on the same line?

h4 is by default displayed as block and as such has a width of auto... it means the whole line. So you should display both h4 and p as inline and/or inline-block (or even table-cell if you want vertical aligning).

Edit: You shouldn't use headings if they aren't followed by text (p or lists for example). They should introduce sections of content. No content, no heading ;) except very rare cases. WCAG 2.0 Techniques G141, H69, G130 and H42 detail that.
It can appear quite uninituitive on the web, but you wouldn't leave a heading without paragraphs below in Word or Libre/OpenOffice for example.

Comments

[AMC]

<p style="display:inline-block"> made no changes.

[AMC]

Using both <p style="display:inline-block"> and <p style="display:inline"> made no visible changes to the page..

[sachleen]

Do that to both h4 and p.

[FelipeAls]

Thanks @sachleen, I added the bold style to my answer too :)