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

Question

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

我正在将li插入到位于ul内的div中。您认为这种结构在语义上是否有效，并且是否会被识别为单个列表？

- Sam

Answer 1

不，div不能作为ul的直接子元素。当你有疑问时，使用W3C验证你的页面或查看W3C上对应的文章：

4.5.6 ul元素

类别
流内容。

可以使用该元素的上下文：
期望流内容的地方。

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

内容属性：
全局属性

DOM接口：
interface HTMLUListElement : HTMLElement {};

相反，您可以使用

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


 

- kba

Answer 2

<div>不在<ul>内部技术上是无效的。W3验证器返回以下结果：

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

更合理的做法是将您具有不同功能的代码分组，例如：

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

- Charlie

Answer 3

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

如果您使用w3c标记验证器进行验证，您可能会得到以下类似的结果：

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

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

- Bjoern

Answer 4

还可以执行以下操作：

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

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

- Nahum Nuñez