1

我正在尝试创建一个列表，每个列表都<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>
4

2 回答 2

3

你想h4和p在同一条线上吗？

h4默认情况下是displayed，block因此具有widthof auto... 这意味着整行。所以你应该同时显示和 h4作为p和inline/或inline-block（或者即使table-cell你想要垂直对齐）。

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

于 2012-06-19T17:42:58.610 回答
3

你想要 theh4和pto be display:inline。h4是默认的，display:block所以它会占据整行。也一样p。我们可以将它们都设置为内联，因为它们li也显示为块。所以里面的所有东西都是内li联的，但每个列表项仍然显示为块。

h4, p {
    display: inline;
}​

在此处查看演示

于 2012-06-19T17:48:48.103 回答