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>

Answer 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