html - 为什么这个超链接不能像这里写的那样工作？

Question

以下是html代码。最后的 div 是调用 javascript 的超链接。这是一个较长页面的底部，但一切正常，直到最后一个超链接出现在页面上但不是可点击的链接。

<div style="padding-left:15%;">
  <a href="#" onclick="Showpages(18);" class="tfl" style="text-decoration:none; color:rgb(255,255,255)"><span class="blank">Action Hyperlink</span></a>
</div><br>

<div class="sp_01 bordered">
  <ul class="sp_03 bordered">
    <li class="sp_03 bordered" style="text-align:justify;">Text 1</li><br>
    <li class="sp_03 bordered" style="text-align:justify;">Text 2</li><br>
    <li class="sponsor_03 bordered" style="text-align:justify;">Text 3</li>
  </ul>
</div><br><br>

<div style="padding-left:15%;">
  <a href="#" onclick="ShowPages(18);" class="tfl" style="text-decoration: none; 	color:rgb(255,255,255)"><span class="blank">Action Hyperlink</span></a>
</div><br>

超链接的第一个实例有效。在 -div class="sp_01 bordered"- 部分之后，超链接的最终实例显示为一行而不是点击链接。

此类问题通常与前面标签的打开和关闭方式有关。我研究了打开和关闭标签，没有发现任何错误。我的编辑器 (Atom) 中的颜色编码对于所有标签都是正确的。

怎么了？

Answer 1

只需将 DIV 包裹在 a 中，例如

  <a href="#" onclick="ShowPages(18);" class="tfl" style="text-decoration: none;    color:rgb(255,255,255)"><span class="blank">Action Hyperlink</span>
    <div style="padding-left:15%;">

    </div>
 </a>
<br>

编辑

为了将来引用，此答案未包含足够的信息。所以我试图删除它。但在答案被接受后，它不能被删除。