Question

我得到了元素不能包含<ul>元素的原因的技术说明。不幸的是，当这是内容的结构时，这对我没有帮助。

在meta中，我既不懂

语义解释，
推荐的结构

我实际上想要显示具有正常内容的“内联”项目列表。

This page建议将列表与段落分开：

<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所谓的语义内容。

在第一种情况下，标签在语义上有何意义？更不用说如果我想消除列表周围的间距（如果我有其他列表确实是单独的内容块，那么正确设计样式的实际困难 - 哦！）

在第二种情况下，如果我需要<div>表示“这是一段内容”，我不妨完全放弃，而不必来回切换取决于段落中出现的内容。

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;
}

Answer 1

对我来说，这是列表炎的一个例子，或者将每个事物序列视为需要标记的列表。

我的第一个方法是标记你所拥有的：

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

如果您需要对这些项目应用通用样式，那么正如您在最后一个示例中所使用的一样。我不会使用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>

Answer 2

如果你使用的是ul或ol，你有效地结束了它之前的段落（或其他元素），除非你是嵌套列表。如果它确实是一个句子并且那些项目是内联的（并且在你建议的情况下，我认为所有这些都是一个句子），那么我只是在中用逗号作为分隔符列出它们：

<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>

将列表放在HTML5中的段落中的正确方法是什么？

2 个答案: