<p> 内的自定义元素内的块元素

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>

应该呈现类似的东西

苏格拉底是一个人，因此苏格拉底是必死的

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

苏格拉底是个男人

什么是男人？以下是一些男性的例子：

• 比尔·克林顿
• 亚里士多德

，因此苏格拉底是必死的

有没有办法解决这个问题？我想避免更改标记结构，这在某种程度上是我无法控制的（否则，我将不得不在后端对其进行预处理）。

Answer 1

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

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

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

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> 也是一个不错的选择。