Html 块元素内部自定义元素内部<；p>；

我正在使用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>

苏格拉底是一个
男人
什么是男人？以下是一些男性的例子：


比尔·克林顿
亚里士多德

所以苏格拉底是会死的

它应该呈现类似于

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

苏格拉底是一个人，因此苏格拉底是凡人

这样，当您将鼠标悬停在单词man上时，该框就会出现。当

只包含内联元素时，这种方法可以正常工作。但是，在上面的示例中，HTML解析器对我将

和
嵌套在另一个
中感到愤怒，并将标记弄乱，使其更像

苏格拉底是一个人

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


比尔·克林顿
亚里士多德

所以苏格拉底是会死的

有没有办法绕过这个问题？我希望避免更改标记结构，这在某种程度上超出了我的控制（否则，我将不得不在后端对其进行预处理）。
html解析器不是“生气”，而是浏览器只是将默认样式应用于您使用的元素

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

在您的例子中，无序列表、项目符号列表项是所有浏览器的标准呈现方式。您的问题是您不希望您的列表看起来像一个列表，因此您有两个选择：

不要将标记用于列表
删除列表的默认样式
如果您不能更改标记，那么您将需要选项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>

什么是男人？这里有一些男人的例子：比尔·克林顿，亚里士多德，因此苏格拉底是凡人


这在语义上没有什么错，因为没有明显的理由说明为什么所有的内容都不能被视为一个段落；尤其是你希望它看起来是这样的

p、 在这个特定的示例中，最好使用
元素来标记您正在为其创建定义的单词。定义列表在这里也是一个不错的选择。
你这辈子都不能这么做可能相关：我认为这是不对的。如果在浏览器中查看并检查呈现页面的DOM，您将看到浏览器正在根段落标记（以及自定义标记）之外移动列表和嵌套段落。这不仅仅是造型的问题。再说一次，在那把小提琴中，我没有定义自定义元素。也许如果我这样做，行为会有所不同？Idk…浏览器只是试图理解您不正确的标记<代码>
元素不能包含其他块级元素，如
或
，它们只能包含内联元素。我的观点是，这个问题似乎与造型无关，正如这个答案所暗示的，它与造型有关。您看到的是合理的默认浏览器样式的结果。当然，你可以用css来改变这一点，正如我在回答中详述的那样；我知道你想这么做。然而，正如我在回答中所解释的，正确使用html可能更有意义。我想如果你使用正确的元素来提供你想要的基本样式，你会发现问题会少一些。仅供参考，我不是OP（你对我的评论的回答似乎暗示你认为我是）。但从我看来，问题不在于样式。OP试图使用自定义元素（看起来像库）来提供“富脚注”类型的功能。问题是浏览器正在将应该位于x-info标记内的脚注内容移动到文档中的其他位置，导致其代码的行为不正确。