16

<p>要素に要素を含めることができない理由について、技術的な説明があり<ul>ます。残念ながら、それがコンテンツの構造である場合、これは役に立ちません。

メタでは、どちらも理解していません

  • 意味論的説明も
  • 推奨される構造

通常のコンテンツと「インライン」でアイテムのリストを実際に表示したい場合。

このページでは、リストを段落から分離することを提案しています。

<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
<p>and is further discussed below.</p>

または、段落に代替タグを使用します。

<div>For instance, this fantastic sentence has bullets relating to
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
and is further discussed below.</div>

しかし、これらは両方とも、HTML5の想定されるセマンティックコンテンツを嘲笑するひどいハックとして私を襲います。

最初のケースでは、タグはどのように<p>意味的に意味がありますか？リストの周りのスペースを削除したい場合（そして、実際にはコンテンツの個別のブロックである他のリストがある場合-oy！）、これを正しくスタイリングすることの実際的な難しさは言うまでもありません。

<div>2番目のケースでは、「これはコンテンツの段落です」という意味のaが必要な場合は、段落<p>内に表示されるコンテンツに応じて前後に切り替えるのではなく、完全に削除する方がよいでしょう。

最も意味的に意味のあるバージョンは次のようなものである可能性があるというISTM：

<p>For instance, this fantastic sentence has bullets relating to
 <span class="li">wizards,</span>
 <span class="li">faster-than-light travel, and</span>
 <span class="li">telepathy,</span>
and is further discussed below.</p>

レンダリングを正しく行うために、スパンをブロックまたはリストアイテム（および他にどのような調整を知っているか）としてスタイル設定します。実際には、これは非常に多くの悪化のように聞こえます。

この種のコンテンツをレンダリングするための良い推奨事項はありますか？

編集

これは実際にはスタイリングするのがそれほど難しいことではないようです。ブラウザのデフォルトをすべて取得する方法があるかどうかはわかりませんが、デフォルトのリストスタイル（少なくともOS X Chromeでは）を次のように複製できます。

span.li {
  display: list-item;
  list-style-type: disc;
  margin-left: 40px;
}
4

2 に答える 2

4

私にとって、これはlistitisの例であり、すべてのシーケンスをそのようにマークアップする必要のあるリストとして見ることです。

私の最初のアプローチは、あなたが持っているものを次のようにマークアップすることです。

<p>For instance, this fantastic sentence has bullets relating to wizards, 
faster-than-light travel, and telepathy, and is further discussed below.</p>

これらのアイテムに共通のスタイリングを適用する必要がある場合、適切なスタイリングフックは<span>最終的な例のようになります。liただし、クラス名としては使用しません。テキストの各スクラップがリストアイテムを構成するかどうかは、あまり意味がありません。ページの全体的なコンテンツとコンテキストでの使用方法を知らずに正しいクラス名を選択することは常に困難ですが、おそらくtopic適切な選択です。したがって、マークアップは次のようになります

<p>For instance, this fantastic sentence has bullets relating to <span
class="topic">wizards</span>, <span class="topic">faster-than-light 
travel</span>, and <span class="topic">telepathy</span>, and is further 
discussed below.</p>
于 2012-04-06T00:28:24.827 に答える
1

リストをネストしていない限り、を使用している場合、ulまたはolその前の段落（または他の要素）を効果的に終了している場合は、私には思えます。それが本当に文であり、それらの項目がインラインである場合（そして、あなたが提案する場合、それはすべて実際に文であると思います）、<p>区切り文字としてコンマを使用してそれらをリストします。

<p>For instance, this fantastic sentence has bullets relating to:
wizards, faster-than-light travel, and telepathy,
and is further discussed below.</p>

本当に弾丸が必要な場合は、おそらく見出しの方が適しています。

<h2>For instance, this fantastic heading has bullets relating to:</h2>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
于 2012-04-06T00:32:49.700 に答える