在<a>中<img>和<span>,只有span作为链接

Question

我有一个菜单,下面是图标(img)和文字(span).我希望它们都可以作为链接点击.我为菜单的每个项目都有这个html:

<div class="menu_item">
    <a href="menu/viewTemplates.html">
        <img class="menu_icon" src="images/icons/template.png" alt="Templates"/>
        <span>Templates</span>
    </a>
</div>

当我点击它时img,没有任何反应,但当我点击它时span,链接工作正常.这在Chrome和Firefox中都会发生.在我读过的每个地方,人们似乎都没有问题,除了IE,但这不是我的情况.请问,有什么可能使这个不起作用的想法？

我试过这样的,它有效:

<div class="menu_item">
    <a href="menu/downloadTemplates.html">
        <div class="menu_icon" id="lnkDownloadTemplates"></div>
        <span>Download</span>
    </a>
</div>

但我仍然想知道为什么另一种方式,那应该是正确的,不适合我.

CSS:

.menu_item{
    height: 15%;
    width: 45%;
    text-align: center;
}
.menu_icon{
    width:auto;
    height:100%;
}

Answer 1

尝试使用显示：块；因为锚标记默认是内联的。您的 HTML：-

 <div class="menu_item">
        <a href="https://www.google.com">
            <img class="menu_icon" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png" alt="Templates"/>
            <span>Templates</span>
        </a>
    </div>

你的CSS-

 .menu_item a {
   display:block;
 }
 .menu_item{
    height: 15%;
    width: 45%;
    text-align: center;
   }
 .menu_icon{
    width:auto;
    height:100%;
  }