1

<li>それぞれが1行にあるリストを作成しようとしています。私の問題は 'Food 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あり、そのためwidthにauto...があります。これは行全体を意味します。したがって、 and as and / orの両方 を表示する必要があります（または、垂直方向の配置が必要な場合でも）。h4pinlineinline-blocktable-cell

p編集：見出しの後にテキスト（またはリストなど）が続かない場合は、見出しを使用しないでください。コンテンツのセクションを紹介する必要があります。非常にまれなケースを除いて、コンテンツも見出しもありません;）。WCAG 2.0テクニックG141、H69、G13​​0、H42はそれを詳しく説明しています。
Web上では非常に直感的ではないように見える場合がありますが、たとえばWordやLibre / OpenOfficeでは、以下の段落なしで見出しを残すことはできません。

于 2012-06-19T17:42:58.610 に答える
3

h4と の両方をpにしたいdisplay:inline。h4がデフォルトでdisplay:blockあるため、行全体を使用します。についても同様ですp。liもブロックとして表示されるため、両方をインラインに設定できます。そのため、 内のすべてliがインラインですが、各リスト項目は引き続きブロックとして表示されます。

h4, p {
    display: inline;
}​

ここでデモを見る

于 2012-06-19T17:48:48.103 に答える