html - 这个 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 中。你怎么看？这种结构在语义上是否有效，是否会被识别为单个列表？

Answer 1

不，div 不允许作为 ul 的直接子级。每当您有疑问时，validate your page with W3C或查看 the corresponding article on W3C :

4.5.6 The ul element

Categories
Flow content.

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

Content model:
Zero or more li elements.

Content attributes:
Global attributes

DOM interface:
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>