验证错误：在此上下文中元素 a 不允许作为元素 ul 的子元素。（抑制来自该子树的更多错误。）答案

【问题标题】：Validation Error: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)验证错误：在此上下文中元素 a 不允许作为元素 ul 的子元素。（抑制来自该子树的更多错误。）
【发布时间】：2014-03-24 01:54:44
【问题描述】：

我正在尝试找到解决此验证错误的方法。我有一个带有缩略图的图像网格，单击时会显示一个模式。一切正常，但无法验证。我不能将 li 放在模态图像周围，或者它在单击之前显示。我对编码很陌生，任何帮助都会很棒。

Line 54, Column 41: Element a not allowed as child of element ul in this context. 
(Suppressing further errors from this subtree.)

<a href="#_" class="lightbox" id="img10">

代码：

<ul class="cbp-rfgrid">
    <li>
        <a href="#img10"><img src="images/portfolio/goat-tn2.jpg" alt="logo"></a>
    </li>
    <a href="#_" class="lightbox" id="img10">
      <img src="images/portfolio/goat.jpg" alt="logo">
    </a>
</ul>

【问题讨论】：

<a> 不是<ul> 的有效子元素。你需要把它放在<li>
@johnconde 有没有办法做到这一点，并且在点击之前不显示图像？

标签： html css validation html-lists

【解决方案1】：

ul 的内容模型不允许在任何版本的 HTML 中使用 a 子级。如果您希望将a 元素包含在li 元素中，则需要将其包装在ul 元素中。

不清楚你为什么首先使用ul。如果第二个图像最初不可见，那肯定完全取决于所涉及的样式表和脚本。由于尚未公开，因此无法说您应该如何重写代码。

【讨论】：

【解决方案2】：

您必须用 LI 包装每个内部 UL。

ul 元素的子元素（直接后代）必须都是 li 元素。这是一个纯粹的语法要求。

你可以看到然后希望完全清楚。 correct semantics for ul in ul

<ul class="menu">
<li>
    <a href="">Demo1</a>
</li>
<li> <----
    <ul class="inside">
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem</a></li>
    </ul>
</li> <----

【讨论】：

或者不是每个“a”都只是<li><a href="#">Lorem ipsum</a><a href="#">Lorem</a></li>它更容易..