html - 内的自定义元素内的 block 元素

Question

我正在使用 HTML5 自定义元素创建所谓的“丰富脚注”(本质上是小的鼠标悬停框)。标记看起来像

<p>
  Socrates is a
  <x-info>
    <x-text>
      man
    </x-text>
    <x-planation>
      <p>What is a man? Here are some examples of men:</p>
      <ul>
        <li>Bill Clinton</li>
        <li>Aristotle</li>
      </ul>
    </x-planation>
  </x-info>, therefore Socrates is mortal
</p>

应该呈现类似的东西

Socrates is a man, therefore Socrates is mortal

这样，当您将鼠标悬停在 ma​​n 一词上时，就会出现该框。这在 <x-info> 时工作正常仅包含行内元素。但是，在上面的示例中，HTML 解析器对我有 <p> 感到生气。 s 和 <ul>嵌套在另一个 <p> 中，并破坏标记，使其呈现得更像

Socrates is a man

What is a man? Here are some examples of men:

• Bill Clinton
• Aristotle

, therefore Socrates is mortal

有什么办法可以解决这个问题吗？我想避免更改标记结构，这有点超出我的控制范围(否则，我将不得不在后端对其进行预处理)。

Answer 1

html 解析器并没有“生气”，它只是将默认样式应用到您使用的元素的浏览器。

列表(ul、ol、dl)是 block 级元素，具有公认的默认样式，所有浏览器都将这些样式(填充、边距、项目符号、数字等)应用于这些元素，以便 让它们看起来像列表。

在您的情况下，无序列表、项目符号列表项是所有浏览器的标准呈现。你的问题是你不希望你的列表看起来像一个列表，所以你有两个选择:

1. 不要将标记用于列表。
2. 删除列表的默认样式。

如果您无法更改标记，那么您将需要选项 2，您可以通过一点 CSS 来实现。

ul {display: inline-block; padding: 0, margin: 0; list-style: none}
ul > li {display: inline;}

当然，选项一要简单得多，因为您可以使用:

<p>What is a man? Here are some examples of men: Bill Clinton, Aristotle, therefore Socrates is mortal</p>

这在语义上没有任何问题，因为没有明显的理由说明为什么所有内容都不能被视为一个段落；特别是因为这是您希望它出现的方式。

附注在这个具体的例子中，使用 <dfn> 可能更可取。标记要为其创建定义的单词的元素。定义列表<dl>在这里也是不错的选择。