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

Question

我正在尝试找到此验证错误的解决方案。我有一个带缩略图的图像网格，点击时会显示一个模态。一切正常但它没有验证。我不能把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>

Answer 1

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

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

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