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>

应该呈现类似

的内容

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

当您将鼠标悬停在单词 man 上时，会出现该框。当<x-info>仅包含内联元素时，此方法可以正常工作。但是，在上面的示例中，HTML解析器生气，我将<p>和<ul>嵌套在另一个<p>中，并破坏了标记，使其呈现更像

苏格拉底是个男人

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


比尔克林顿

亚里士多德


，因此苏格拉底是致命的

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

Answer 1

The html parser is not 'getting angry', it is the browser that's simply applying default styles to the elements you have used.

A list (ul, ol, dl) is a block-level element, with accepted default styles, and all browsers apply those styles (padding, margin, bullets, numbers, etc.) to these elements in order to make them look like lists.

In your case, an unordered list, bulleted list items is the standard rendering for all browsers. Your issue is that you don't want your list to look like a list, so you have two options:

Don't use the markup for a list.
Remove the default styling for a list.

If you cannot alter the markup, then you'll want option 2, which you can achieve with a little bit of css.

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

Of course, option one is far easier as you can just use:

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

There's nothing wrong with that semantically, as there's no obvious reason why all the content couldn't be considered a paragraph; especially as that is how you want it to appear.

p.s. In this specific example it would probably be preferable to use the <dfn> element to markup the word you are creating a definition for. A definition list <dl> would also be a good choice here.

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

1 个答案: