<img> ve <a> iç <span> ve sadece açıklık altındaki simgeler (<code>img</code>) ve metin (<code>span</code>) ile bir bağlantı ben bir menü

Question

olarak çalışmaktadır. Her ikisinin de bağlantı olarak tıklanabilir olmasını istiyorum. Ben menüsünün her öğe için bu html vardır:

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

Ben img tıklayın

, hiçbir şey olmuyor ama span tıkladığımda, bağlantı çalışıyor. Bu hem Chrome hem de Firefox'ta olur. Okuduğum her yerde, insanlar bunu yapmak için IE dışında bir problem yaşamıyor gibi görünüyor, ama bu benim durumum değil. Lütfen, bunun ne işe yaradığını gösteren herhangi bir fikir çalışmıyor mu?

böyle denedim ve çalışıyor:

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

Ama hala başka bir yol, yani benim için çalışmıyor mi doğru olması gerekiyordu neden bilmek istiyorum.

CSS:

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

Answer 1

ekran kullanmayı deneyin: block; Bağlantı etiketi varsayılan olarak satır içi şeklindedir. HTML'iniz: -

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

Kişisel 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>

bu Aradığınız aynı mı?

Bu yardımcı olur umarım.

Answer 3

Sorunun, öğelerin kimliklerini aldığım (kimliğimi gönderdiğimde kimlikleri eklemedim) ve bağlantıyı geçersiz kılan bir JS kodunda olduğunu öğrendim.