“ul”元素永远不能是“p”元素的子元素答案

【问题标题】：An 'ul' element can never be a child of a 'p' element“ul”元素永远不能是“p”元素的子元素
【发布时间】：2012-05-15 13:07:28
【问题描述】：

为什么我们永远不能将ul 元素作为p 元素的子元素？

我用下面的代码做了一个网页

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

这里，ul 元素是 p 元素的子元素。但是，在所有主流浏览器（Chrome、Firefox 和 Internet Explorer - 所有最新版本）中，它的解释如下

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

我通过右键单击 ul 元素（在 Chrome 中）并选择检查元素选项来检查它。我在 Chrome 中看到过，但其他两个浏览器的行为方式也相同（CSS 选择器 'p ul' 效果不佳）。

为什么会这样？是否存在浏览器进行此类更改的一般情况？

【问题讨论】：

Should ol/ul be inside <p> or outside?的可能重复

标签： html html-lists

【解决方案1】：

请查看HTML specification，其中明确指出禁止将列表放在段落元素中，并举例说明可以做什么：

列表元素（特别是 ol 和 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> 
这个例子还有五个结构段落，但现在作者可以只设置 div 的样式而不必分别考虑示例的每个部分。

【讨论】：

我正在使用 trumbowyg 并且在编辑器 chrome 中允许 ol 在 p: i.imgur.com/1uyqtNO.png 内。在编辑器的 HTML 之外，它和 OP 有同样的问题。编辑器给了我 HTML 代码，我必须在它之外显示它，所以它会中断（因为它在 p 内部有 ol）。编辑器本身是如何允许的？
@hakermania 编辑器动态地操作 DOM（通过 JS）。 Chrome 读取 HTML 并从中构建 DOM 是一个不同的场景。
编辑器的值（html 代码）在文件本身的 html 中给出（想象一下 <textarea> <HTML CODE HERE> </textarea>），然后在 textarea 元素上调用编辑器的 js 代码。这意味着浏览器对文本区域内的 html 代码拥有第一发言权，而然后是编辑器。因此，如果 chrome 已将 <p><ol>...</ol></p> 转换为 <p></p><ol>...</ol>，那么编辑器将看到后者的值而对前者一无所知。我认为幕后发生了其他事情，但我找不到。
@hakermania 无论 textarea 标签中的内容是什么，浏览器都不会将其验证为 HTML - 它被视为普通字符串。
根据whatwg.org，这确实是正确答案。不幸的是，MDN 正在发送一条带有他们自己的ul/ol 描述的令人困惑的消息，指出Permitted parents: Any element that accepts flow content. (developer.mozilla.org/en-US/docs/Web/HTML/Element/ol) 流内容元素列表也包含p。非常混乱。

【解决方案2】：

在 HTML 中一直有一条规则，p 元素只能包含文本和文本级标记，例如不能包含列表。因此，当p 元素打开并且遇到块级元素的开始标记（如<ul>）时，浏览器暗示关闭</p> 标记。在您的示例中，</ul> 之后的 </p> 标记是无家可归的，通常会被忽略。

【讨论】：

【解决方案3】：

<p> 只能有内联元素作为子元素，没有块元素（例如，参见MDN）。另一方面，<ul> 是块级元素 (MDN)！

如您所见，浏览器解释您的代码的原因在于 HTML5 解析规范。规范列出了一个非常像您自己的示例：whatwg link。

另一个有趣的相关问题可能是：HTML: Include, or exclude, optional closing tags?

【讨论】：