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

问题描述

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

Why can we never have a 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>

在这里，ul元素是p元素的子元素.但是，在所有主流浏览器(Chrome，Firefox和Internet Explorer-所有最新版本)中，其解释如下:

Here, the ul element is a child of the p element. However, in all major browsers (Chrome, Firefox, and Internet Explorer - all latest versions), it gets interpreted as follows

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

我通过右键单击ul元素(在Chrome中)并选择检查元素选项来对其进行检查.我在Chrome中看到了它，但是其他两个浏览器的行为也相同(CSS选择器'p ul'不能很好地工作).

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 two browsers also behaved in the same way (CSS selecter 'p ul' didn't work well).

为什么会这样?在一般情况下，浏览器会进行此类更改吗?

Why is it so? Is there a general case in which such changes by the browser takes place?

推荐答案

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

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:

列表元素(尤其是ol和ul元素)不能是p元素的子元素.因此，当句子包含项目符号列表时，您可能会想知道如何标记它.

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

• 向导，
• 快于光的旅行和
  
• telepathy，
  • wizards,
  • faster-than-light travel, and
    
  • telepathy,

    ，下面将进一步讨论.

    解决方案是认识到用HTML术语来说，一段不是 逻辑概念，但是结构性概念.在上面的精彩示例中， 该规范实际上定义了五段: 列表前一个，每个项目符号一个，列表后一个.

    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>
    

    希望 方便地设置由多个字母组成的逻辑"段落的样式 结构"段落可以使用div元素代替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> 
    

    这个例子仍然有 五个结构段落，但现在作者可以仅对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屋！