验证错误：在此上下文中，元素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>

- user3453751

---

<a>不是<ul>的有效子元素。你需要将它放在<li>中。 - John Conde

@johnconde 有没有办法让图片在未被点击时不显示？ - user3453751

Answer 1

ul的内容模型在任何HTML版本中都不允许有a子元素。如果您希望在

元素内使用a元素，则需要将其包装在li元素内。

首先并不清楚为什么要使用ul。如果第二个图像最初不可见，那肯定完全取决于所涉及的样式表和脚本。由于它们没有被公开，因此无法确定应如何重写代码。

- Jukka K. Korpela

Answer 2

您必须将每个内部UL都包装在LI中。

UL元素的子元素（直接后代）必须全部为li元素。这是纯语法要求。

您可以看到希望完全清晰。 嵌套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> <----

- Bipon Biswas

---

不是每一个“a”都是 <li><a href="#">Lorem ipsum</a><a href="#">Lorem</a></li>，这样更容易。 - user25