<img> i <span> wewnątrz <a> i tylko rozpiętość działa jako łącznik

Question

mam menu z ikonami (img) i tekst pod spodem (span). Chcę, aby obie były klikalne jako link. Mam ten kod HTML dla każdej pozycji 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> 

Kiedy klikam na img nic się nie dzieje, ale gdy klikam na span, link działa prawidłowo. Dzieje się tak zarówno w Chrome, jak i Firefoksie. Gdziekolwiek czytałem, ludzie wydają się nie mieć problemu z robieniem tego, z wyjątkiem IE, ale to nie jest moja sprawa. Proszę, wszelkie pomysły co do tego, co mogłoby sprawić, że to nie zadziała ?.

Próbowałem to tak, i to działa:

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

Ale nadal chcę wiedzieć, dlaczego w inny sposób, który ma być prawidłowa, nie pracuje dla mnie.

CSS:

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

Answer 1

Spróbuj użyć display: block; Ponieważ znacznik zakotwiczenia jest domyślnie wbudowany. Twój 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> 

Twój CSS-

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

Answer 2

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

Jest to tym samym, że szukasz?

Mam nadzieję, że to pomoże.

Answer 3

Okazało się, że problem dotyczył kodu JS, który pobierał identyfikatory moich elementów (nie zawierał identyfikatorów, gdy opublikowałem moje pytanie) i przesłaniał link.