css - p style=显示 :inline trouble

Question

我正在尝试创建一个列表，其中每个 <li>在一排。我的问题出在“食物 4”上，我需要在其中添加一条描述 <h4> 的注释;我似乎无法清除 <p> 创建的换行符.我试过了 <p style="display:inline>以及我能想到的每一种变化。我错过了什么？

<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

您希望 h4 和 p 都为 display:inline。 h4 是默认的，display:block 所以它会占据整行。 p 也是如此。我们可以将它们都设置为内联，因为 li 也显示为 block 。所以 li 中的所有内容都是内联的，但每个列表项仍显示为 block 。

h4, p {
    display: inline;
}​

See demo here