这个 HTML 结构有效吗？UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }

Is this HTML structure valid? UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }

提问by Sam

Is this HTML structure valid?

这个 HTML 结构有效吗？

<ul class="blog-category">
  <div class="three column">
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
  </div>
  <div class="three column">
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
  </div>
  <div class="three column">
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
  </div>
</ul>

I am inserting li's inside div which is within ul. What do you think? Is this stucture semantically valid and will that be recognized as a single list?

我在 ul 内插入 li 的内部 div。你怎么认为？这种结构在语义上是否有效，是否会被识别为单个列表？

回答by kba

No, divis not allowed as a direct child of ul. Whenever you're in doubt, validate your page with W3Cor check the corresponding article on W3C:

不，div不允许作为 的直接子代ul。如有疑问，请使用 W3C 验证您的页面或查看W3C 上的相应文章：

4.5.6 The ul element

Categories
Flow content.

Contexts in which this element can be used:
Where flow contentis expected.

Content model:
Zero or more li elements.

Content attributes:
Global attributes

DOM interface:
interface HTMLUListElement : HTMLElement {};

4.5.6 ul 元素

类别
流内容。

上下文中该元素可用于：
当流内容的预期。

内容模型：
零个或多个 li 元素。

内容属性：
全局属性

DOM接口：
interface HTMLUListElement : HTMLElement {};

Instead you could use

相反，您可以使用

<ul class="blog-category">
    <li class="three column">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </li>
    <li class="three column">
        <ul>
            <li>Item 4</li>
            ...
        </ul>
    </li>
</ul>

回答by Charlie

<div>'s aren't technically valid inside of <ul>'s. W3 validator returns this result:

<div>'s 在 's 中在技术上无效<ul>。W3 验证器返回此结果：

Element div not allowed as child of element ul in this context

在此上下文中不允许元素 div 作为元素 ul 的子元素

It would make more sense to group the code you have different, such as:

将不同的代码分组会更有意义，例如：

<div class="blog-category">
<ul class="three-column">
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
</ul>
</div>

回答by Nahum Nu?ez

It is valid also do the following:

执行以下操作也是有效的：

          <ul>
            <li>
                <div>Title</div>
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </li>
            <li>
                <div>Title</div>
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </li>
        </ul>

I've checked in http://validator.w3.org/check

我已经检查过http://validator.w3.org/check

回答by Bjoern

No, this is not valid, neither in HTML4, nor in XHTML or in HTML5.

不，这在 HTML4、XHTML 或 HTML5 中都无效。

If you'll validate this against the w3c markup validatoryou'll probably get something like:

如果您将根据w3c 标记验证器对此进行验证，您可能会得到如下结果：

Element div not allowed as child of element ul

元素 div 不允许作为元素 ul 的子元素

More about lists can be found here.

可以在此处找到有关列表的更多信息。