मैं अपने नेविगेशन बार में किसी सूची आइटम का पूरा क्षेत्र कैसे बनाऊं, एक लिंक के रूप में क्लिक करने योग्य?

Question

मुझे एक अव्यवस्थित सूची से बना एक क्षैतिज नेविगेशन बार मिला है, और प्रत्येक सूची आइटम में बहुत अच्छा बनाने के लिए पैडिंग है, लेकिन एकमात्र क्षेत्र जो एक लिंक के रूप में काम करता है वह पाठ ही है। मैं लिंक को सक्रिय करने के लिए सूची आइटम में कहीं भी क्लिक करने के लिए उपयोगकर्ता को कैसे सक्षम कर सकता हूं?

#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  float: left;
  padding: 25px 10px;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

<div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>

Answer 1

'ली' आइटम में पैडिंग न रखें। इसके बजाय लंगर टैग को सेट करें display:inline-block;और उस पर पैडिंग लागू करें।

Comments

display: inline; zoom: 1;IE6 और IE7 के लिए एक सशर्त टिप्पणी में display: inline-block;, हालांकि हाँ, यदि सूची आइटम पहले से ही मंगाई गई हैं, display: block;तो भी ठीक होगी

— FelipeAls

यह अच्छी तरह से केवल एक शिकायत काम किया, यह के साथ काम करने के लिए प्रतीत नहीं किया: चयनकर्ता के बाद। मैं >अपने लिंक टेक्स्ट के बाद एक प्रतीक दिखाना चाहता था , लेकिन इसे सामग्री में नहीं डाला ... मैंने इसे सामग्री में रखना समाप्त कर दिया। अगर वहाँ एक बेहतर तरीका है कि पूरा करने के लिए उत्सुक हो जाएगा।

— counterbeing

Answer 2

अपने एंकर टैग सीएसएस संपत्ति को परिभाषित करें:

{display:block}

तब लंगर पूरे सूची क्षेत्र पर कब्जा कर लेगा, इसलिए आपकी क्लिक आपकी सूची के बगल में खाली जगह में काम करेगी।

Comments

काश, मैं उत्तर सूची के शीर्ष पर इस उत्तर को खींच पाता ... इस समस्या का सबसे अच्छा समाधान है !!!!

— ऋषभ

अगर किसी और चीज़ में है li, जैसे कि एक आइकन।

— ग्रिंगो सुवे

Answer 3

एंकर टैग बनाओ के बजाय गद्दी होते हैं li। इस तरह, यह सभी क्षेत्र को ले जाएगा।

Comments

मैं यह भी सुझाव दूंगा कि बेहतर ब्राउज़र समर्थन के लिए एवर के साथ-साथ लीवर को भी हॉवर स्टेट ले जाना।

— निंजाबॉम्ब

Answer 4

सुपर, इस पार्टी में देर से, लेकिन वैसे भी: आप एंकर को एक फ्लेक्स आइटम के रूप में भी स्टाइल कर सकते हैं। यह डायनामिक आकार / व्यवस्थित सूची आइटम के लिए विशेष रूप से उपयोगी है।

a {
  /* This flexbox code stretches the link's clickable 
   * area to fit its parent block. */
  display:        flex;
  flex-grow:      1;
  flex-shrink:    1;
  justify-content: center;
}

(कैविएट: फ्लेक्सबॉक्सेस obvs अभी भी अच्छी तरह से समर्थित नहीं हैं। बचाव के लिए ऑटोप्रेक्सिफ़र!)

Comments

लेकिन अब (कुछ साल बाद), फ्लेक्स अच्छी तरह से काम कर रहा है, इसलिए मुझे लगता है कि मेनू ulऔर फ्लेक्सबॉक्स के साथ निर्माण करते समय यह सबसे अच्छा जवाब है ।

— लुडोविक क्यूट

Answer 5

निम्नलिखित का उपयोग करें:

a {
  display: list-item;
  list-style-type: none;
}

Answer 6

या आप jQuery का उपयोग कर सकते हैं:

$("li").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

Comments

कोई कह सकता है कि यह समाधान 'गंदे जक्वेरी समाधान है जिसकी जरूरत नहीं है क्योंकि आप इसे आसानी से सीएसएस से कर सकते हैं।' लेकिन ईमानदार होने के लिए - कभी-कभी आप अपने आप को नहीं-कोड के साथ काम करने की स्थिति में पाते हैं और आपके पास सभी डोम संरचना और सीएसएस स्टाइलशीट को जानने के लिए (और 'क्या कोडर सोच रहा था') को समझने का समय नहीं है। तो +1।

— लेमॉइड

@ एलाइड के साथ सहमत, हमें याद रखना होगा "सुंदर" समाधान हमेशा वास्तविक जीवन में व्यावहारिक नहीं होते हैं।

— UncaAlby

मैं भी तुमसे प्यार करता हूँ!!

— कास्टीलांचो

Answer 7

आपको इस सीएसएस संपत्ति और मूल्य का उपयोग अपने में करना चाहिए li:

pointer-events:all;

तो, आप jQuery या जावास्क्रिप्ट के साथ लिंक को संभाल सकते हैं, या एक aटैग का उपयोग कर सकते हैं , लेकिन अंदर के सभी अन्य टैग तत्वों liमें सीएसएस गुण होना चाहिए:

pointer-events:none;

Answer 8

बस नीचे सीएसएस लागू करें:

<style>
  #nav ul li {
    display: inline;
  }

  #nav ul li a {
    background: #fff;// custom background
    padding: 5px 10px;
  }
</style>

Answer 9

यहाँ देखें कि मैंने यह कैसे किया

<a>इनलाइन-ब्लॉक बनाएं और अपने से पैडिंग निकालें<li>

तो फिर तुम साथ खेल सकते हैं widthऔर heightकी <a>में<li>

रखो widthकरने के लिए 100%एक शुरुआत के रूप और देखें कि यह कैसे काम करता है

PS: - heightऔर बदलते समय क्रोम डेवलपर टूल्स की मदद लेंwidth

Answer 10

आप हमेशा पूरे टैग ली को hiperlink टैग के साथ लपेट सकते हैं यहां मेरा समाधान है:

#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  text-align: center;
  float: left;
  width: 40px;
  padding: 25px 10px;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

<div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <a href="#"><li>One1</li></a>
    <a href="#"><li>Two</li></a>
    <a href="#"><li>Three</li></a>
    <a href="#"><li>Four</li></a>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>

Comments

किसी अन्य अस्वीकृत उत्तर से टिप्पणी चुराने के लिए: "यह काम करता है, लेकिन वाक्यविन्यास अमान्य है।"

— टॉपस्किप

Answer 11

हाइपरलिंक के भीतर सूची आइटम को दूसरे तरीके के बजाय रखें।

अपने कोड के साथ उदाहरण के लिए:

<a href="#"><li>One</li></a>

Comments

@DannyBeckett यह HTML5 में मान्य है।

— टेक

@ यह नहीं है ।

— डैनी बेकेट

आप सही हैं, मैं एंकर के अंदर अनुमति दिए गए ब्लॉक तत्वों के बारे में सोच रहा था, लेकिन मुझे नहीं पता था कि उल बच्चे नियम के अपवादों में से एक थे। w3.org/html/wg/drafts/html/master/… शीघ्र सुधार के लिए धन्यवाद।

— टेक

अरे नहीं नहीं नहीं ... आपका सिंटैक्स और अर्थ मार्क बस खिड़की से बाहर चला गया। फिर कभी ऐसा मत करो मेरे दोस्त, यह सिर्फ वेब को एक भयानक जगह बनाता है।

— तेदोर सैंडू