and inside , and only the span works as a link

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

.menu_item {
  height: 15%;
  width: 45%;
  text-align: center;
}
.menu_item a {
  text-decoration: none;
}
.menu_item a .menu_icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

<div class="menu_item">
    <a href="menu/viewTemplates.html">
        <img class="menu_icon" src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="Templates"/>
        <span>Templates</span>
    </a>
</div>

这和你要找的一样吗？

希望这可以帮助。

Answer 2

尝试使用display：block;由于锚标记默认为内联。你的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%;
  }

Answer 3

发现问题出在一个JS代码上，该代码使用了我的元素的ID（当我发布我的问题时我没有包含ID）并覆盖了链接。