Question

当我在w3验证器上验证我的html时，出现以下错误：

元素a在此上下文中不允许作为元素ul的子元素。（抑制此子树的进一步错误。）。

网站正在我的手机，平板电脑和桌面上正常显示（主播正在运行），我真的不明白这个错误信息。有人可以告诉我我做错了什么以及如何正确地做到这一点？

以下是产生错误的代码部分：

<section id="skills">
    <div class="skills-header">
        <p>Pozdravljen Svet! Pišem lahko:</p>
    </div>
    <div class="skills-container">
        <ul>
            <li>< html5 ></li>
            <li> { css3 }</li>
            <li>javascript.js</li>
            <li class="break">$(jQuery)</li>
            <li class="break"><%= rails 4 %></li>
            <li class="break">< div class="bootstrap" ></li>
            <li class="break">$ sudo apt-get update</li>
            <a href="https://si.linkedin.com/pub/miha-šušteršič/b2/60/654"><li class="profile-icon ion-social-linkedin"></li></a>
            <a href="https://github.com/Shooshte"><li class="profile-icon ion-social-github"></li></a>
        </ul>
    </div>
</section>

Answer 1

<ul>只能包含<li>个元素。这真的很简单。

<ul>是“无序列表”，<li>是“列表项”。列表应该只包含列表项......

您可能会发现它在浏览器中正常运行，但您不应该这样做。有些浏览器会自动更正您的错误并在<li>个元素周围包含<a>，其他浏览器会让它看起来很糟糕。

如果您想更正代码，我建议如下：

<li><a href="https://si.linkedin.com/pub/miha-šušteršič/b2/60/654" class="profile-icon ion-social-linkedin"></a></li>
<li><a href="https://github.com/Shooshte" class="profile-icon ion-social-github"></a></li>

Answer 2

我也有同样的疑问，并且理解错误和更正。但是我使用<a>周围的<li>是因为我希望整行都是可点击的链接。

放置<li><a>TEXT</a></li>将破坏此特性。只是TEXT将是链接。在摘要上的第1行和第2行中，整行都可点击（<a>周围的{<li>）。3和4 no（<li>周围的<a>）。

实现它的最佳方法是什么？

li {
  list-style-type: none;
  width: 150px;
  border: 1px solid;
}

<ul>
  <a href="#"><li>Text Line 1</li></a>
  <a href="#"><li>Text Line 2</li></a>
  <li><a href="#">Text Line 3</a></li>
  <li><a href="#">Text Line 4</a></li>
</ul>

w3 html5验证，锚不允许作为ul的孩子

2 个答案: