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>

我正在插入里面的div里面的li。你怎么看？这个结构在语义上是否有效，是否会被识别为单个列表？

Answer 1

不，div不允许ul成为interface HTMLUListElement : HTMLElement {};的直接子女。如果您有疑问，请validate your page with W3C或查看the corresponding article on W3C：

4.5.6 ul元素

<强>分类
  Flow content

可以使用此元素的上下文：
  预计flow content的位置。

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

内容属性：
  Global attributes

DOM界面：
  <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>

相反，你可以使用

{{1}}

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>

Answer 3

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

如果你对w3c markup validator进行验证，你可能会得到类似的结果：

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

有关列表的更多信息，请访问here.

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

Answer 5

这是有效的HTML5：

<ul>
    <li class="col">
        <div>Title</div>
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </li>
    <li class="col">
        <div>Title</div>
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </li>
</ul>

这个HTML结构有效吗？ UL> DIV＆gt; {LI，LI}，DIV＆gt; {LI，LI}，DIV＆gt; {LI，LI}

5 个答案:

4.5.6 ul元素