Question

I have a menu, with icons (img) and text underneath (span). I want both of them to be clickable as a link. I have this html for each item of the menu:

<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>

When I click on the img, nothing happens, but when I click on the span, the link works fine. This happens in both Chrome and Firefox. Everywhere I've read, people seem to have no problem doing this, except for IE, but this is not my case. Please, any ideas as to what could be making this not work?.

I tried it like this, and it works:

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

But I still want to know why the other way, that is supposed to be the correct, Is not working for me.

CSS:

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

Answer 1

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这与您正在寻找的相同吗？

希望这有帮助。

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）并覆盖了链接。

<img/>和<span> <a>, and only the span works as a link

3 个答案: