UI元素永远是p的子元素UI元素永远是p的子元素(ul element can never be a

我们为什么不能有一个UI元素作为AP元素的孩子呢？ 我做了一个网页，用下面的代码

<p> some text
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
</p>

这里，UI元素是p元素的一个孩子。 然而，在所有主要浏览器（Chrome，火狐，IE浏览器）（所有的最新版本），它被解释如下

<p> some text</p>
<ul>
<li>...</li>
<li>...</li>
.
.
.
</ul>
<p></p>

我通过了UL元素（铬）上单击鼠标右键并选择检查元素选项选中它。 我看到它在Chrome，但其他浏览器的2以同样的方式还表现（CSS selecter“P UL”没有工作很好）。

为什么会这样呢？ 谁能告诉在浏览器这样的变化发生一般情况下？

Answer 1:

请检查HTML规范 ，其中明确指出，将列出一个段落元素是被禁止的，并且给出了什么可以做一些例子：

列表中的元素（特别是醇和UL元件）不能是p个元素的孩子。 当一个句子中包含一个项目符号列表，因此，人们可能会问应该如何进行标记。

举例来说，这个梦幻般的句子具有与子弹

• 向导，
• 快于光速旅行，和
  
• 心灵感应，

并且在下面进一步讨论。

解决的办法是要认识到一个段落，在HTML而言，不是一个逻辑概念，而是一个结构性的。 在上面的例子梦幻般的，实际上有由该实物和说明书定义五段：一个列表之前，每一个子弹，以及一个列表之后。

因此，对于上面的例子中的标记可以是：

  <p>For instance, this fantastic sentence has bullets relating to</p> <ul> <li>wizards, <li>faster-than-light travel, and <li>telepathy, </ul> <p>and is further discussed below.</p> 

希望方便风格这样的“逻辑”由多个“结构性”的段落的段落可以使用div元素，而不是p元素作者。

因此，例如上述的例子可以成为以下内容：

  <div>For instance, this fantastic sentence has bullets relating to <ul> <li>wizards, <li>faster-than-light travel, and <li>telepathy, </ul> and is further discussed below.</div> 

这个例子还有五个结构段落，但现在笔者可以只风格，而不必单独考虑的例子中的每个部分的股利。

Answer 2:

一直以来，在HTML的规则，一个p元素可以只包含文本和文本级标记，而不是例如列表。 因此，浏览器意味着闭</p>标签，当p元件打开和用于块级元素开始标记，像<ul>在遇到。 在示例中， </p>后标记</ul>是无家可归和通常被忽略。

Answer 3:

<p>只能有内联元素作为儿童的和没有块元素（参见，例如，在MDN ）。 <ul>另一方面是一个块级元素（ MDN ）！

之所以浏览器解释你的代码，你所看到的还在于HTML5解析规范。 该规范中列出的例子非常像自己： WHATWG链接 。

另一个有趣的相关问题可能是这样的： HTML：包括或排除，可选的结束标记？

文章来源: ul element can never be a child of p element