html - 'ul' 元素永远不能是 'p' 元素的子元素

Question

为什么我们永远不能将 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”效果不佳)。

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

Answer 1

请检查HTML specification ，它明确指出禁止将列表放在段落元素中，并给出了一些可以做什么的例子:

List elements (in particular, ol and ul elements) cannot be children of p elements. When a sentence contains a bulleted list, therefore, one might wonder how it should be marked up.

For instance, this fantastic sentence has bullets relating to

• wizards,
• faster-than-light travel, and
  
• telepathy,

and is further discussed below.

The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example above, there are actually five paragraphs as defined by this speciication: one before the list, one for each bullet, and one after the list.

The markup for the above example could therefore be:

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

Authors wishing to conveniently style such "logical" paragraphs consisting of multiple "structural" paragraphs can use the div element instead of the p element.

Thus for instance the above example could become the following:

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

This example still has five structural paragraphs, but now the author can style just the div instead of having to consider each part of the example separately.