2

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

这应该呈现类似

苏格拉底是人，所以苏格拉底是必死的

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

苏格拉底是人

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

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

，因此苏格拉底是必死的

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

4

1 回答 1

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>

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

ps 在这个特定的例子中，最好使用<dfn>元素来标记您正在为其创建定义的单词。定义列表<dl>在这里也是一个不错的选择。

于 2015-06-15T15:01:48.457 回答