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在同一行吗？

h4默认display为block，因此width为auto ...这意味着整行。因此，如果您想要垂直对齐，则应将{strong> h4和p显示为inline和/或inline-block（或甚至table-cell ）。

编辑：如果标题后面没有文字（p或列表），则不应使用标题。他们应该介绍一些内容。没有内容，没有标题;）除了非常罕见的情况。 WCAG 2.0技术G141，H69，G130和H42详细说明了这一点。
它在网络上看起来非常无条件，但你不会在Word或Libre / OpenOffice中留下没有下面段落的标题。

Answer 2

您希望h4和p都为display:inline。默认情况下，h4为display:block，因此它将占用整行。同样适用于p。我们可以将它们都设置为内联，因为li也显示为块。因此li内的所有内容都是内联的，但每个列表项仍然显示为块。

h4, p {
    display: inline;
}

See demo here

p style = display：内联麻烦

2 个答案: