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>标签在语义上有何意义？更不用说如果我想消除列表周围的间距（然后如果我有其他真正是单独的内容块的列表 - 哦！）

在第二种情况下，如果我需要一个<div>表示“这是一段内容”的意思，我不妨<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

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

我的第一种方法是将您拥有的内容标记为：

<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

在我看来，如果您正在使用 aul或者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 回答