ul元素永远不可能是p元素的子元素 [英] ul element can never be a child of p element

问题描述

为什么我们永远不会有ul元素作为p元素的子元素？
我用下面的代码创建了一个网页

 < p>一些文本
< ul> 
< li> ...< / li> 
< li> ...< / li> 
。 
。 
。 
< / ul> 
< / p> 
  

在这里，他的ul元素是p元素的子元素。但是，在所有主流浏览器（Chrome，Firefor，IE）（所有最新版本）中，它都被解释为如下所示：

 < p为H.一些文字< / p> 
< ul> 
< li> ...< / li> 
< li> ...< / li> 
。 
。 
。 
< / ul> 
< p>< / p> 
  

我通过右键单击ul元素（在chrome中）并选择inspect元素选项。我看到它在Chrome浏览器中，但另外两个浏览器的行为也是一样（css selecter'p ul'does not work well）。

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

：//developers.whatwg.org/grouping-content.html#the-p-element> HTML规范，其中明确指出将列表放在段落元素中是禁止的，并且举例说明做完：

列表元素（特别是ol和ul元素）不能是p元素的子元素。因此，当一个句子包含一个项目符号列表时，人们可能会想知道它应该如何标记。

例如，这个非常棒的句子有一些与

$有关的项目符号b
$ b

• 向导，
• 轻快旅行和
  
  
• 心灵感应，

进一步讨论如下。

解决方案是认识到一个段落，用HTML术语来说，不是一个
的逻辑概念，而是一个结构化的概念。在上面这个很棒的例子中，
实际上有五个段落，这个段落定义如下：
一个在列表之前，一个在每个项目符号之后，一个在列表之后。

$

 < p>例如，这个奇妙的句子有与< / p>相关的项目符号
< ul> 
向导，
快于轻微旅行和
心灵感应，
< / ul> 
< p>并在下面进一步讨论。< / p> 
  

希望使用
的作者可以很方便地使用这样的逻辑段落，其中包含多个
结构段落可以使用div元素而不是p
元素。

因此，例如上面的例子可能会变成下面这样：

 < div>例如，这个梦幻般的句子有与
< ul> 
向导，
快于轻微旅行和
心灵感应，
< / ul> 
，并在下面进一步讨论。< / div> 
  

这个例子仍然有
五个结构段落，但现在作者可以设置div的样式
，而不必单独考虑示例的每个部分。

Why can we never have ul element as the child of a p element? I made a web page with the following code

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

here, he ul element is a child of the p element. However, in all major browsers(Chrome, Firefor, IE)(all latest versions), it got interpreted as follows

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

I checked it by right-clicking on the ul element(in chrome) and selecting the inspect element option. I saw it in chrome but the other 2 browsers also behaved in the same way(css selecter 'p ul' didnt work well).

Why is it so? Can anyone tell a general case in which such changes by the browser takes place?

解决方案

Please check the HTML specification, which clearly states that putting lists in a paragraph element is forbidden, and also give some examples on what could be done:

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.

这篇关于ul元素永远不可能是p元素的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！