<img> और <span><a> अंदर है, और केवल अवधि एक लिंक

Question

मैं एक मेनू है, माउस (img) और पाठ के नीचे (span) के साथ के रूप में काम करता है। मैं चाहता हूं कि वे दोनों एक लिंक के रूप में क्लिक करने योग्य हों। मैं मेनू के प्रत्येक आइटम के लिए इस एचटीएमएल है:

<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 पर क्लिक करें, लिंक ठीक काम करता है। यह क्रोम और फ़ायरफ़ॉक्स दोनों में होता है। जहां भी मैंने पढ़ा है, लोगों को आईई को छोड़कर ऐसा करने में कोई समस्या नहीं है, लेकिन यह मेरा मामला नहीं है। कृपया, कोई विचार क्या हो सकता है कि यह काम नहीं कर सकता है?

मैं इसे इस तरह की कोशिश की, और यह काम करता है:

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

लेकिन मैं अभी भी पता करने के लिए क्यों अन्य तरीके से, कि, मेरे लिए काम नहीं कर रहा है सही माना जाता है चाहता हूँ।

सीएसएस:

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

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>

यह एक ही है कि आप के लिए देख रहे हैं?

उम्मीद है कि इससे मदद मिलती है।

Answer 3

पता चला कि समस्या जेएस कोड पर थी जो मेरे तत्वों की आईडी ले रही थी (जब मैंने अपना प्रश्न पोस्ट किया था तो आईडी में शामिल नहीं था) और लिंकिंग को ओवरराइड करना था।