<a> टैग बटन के क्लिक करने योग्य क्षेत्र को कैसे बढ़ाया जाए?

मैंने इस post से सीखा है जो हमेशा बटन बनाने के लिए <a> टैग या <button> टैग का उपयोग करता है। अब मैं <a> टैग का उपयोग करने की कोशिश कर रहा हूं। मेरा सवाल है: टैग क्लिक करने योग्य क्षेत्र को बढ़ाने का कोई तरीका है? मान लें कि मैं एक div बॉक्स में <a> का उपयोग कर रहा हूं। मैं पूरा div बॉक्स एक बटन बनना चाहता हूँ। क्या मैं क्लिक क्षेत्र को पूरे डिव बॉक्स में बदल सकता हूं? आपकी मदद के लिए धन्यवाद।<a> टैग बटन के क्लिक करने योग्य क्षेत्र को कैसे बढ़ाया जाए?

स्रोत

2012-06-18 Ivan Wang

उपयोग <a /> जब आप एक लिंक (एक कीलंगर) की जरूरत है। जब आपको बटन की आवश्यकता होती है तो <button /> का उपयोग करें।

यह कहा गया है कि, यदि आपको वास्तव में <a /> का विस्तार करने की आवश्यकता है, तो उस पर सीएसएस विशेषता display: block; जोड़ें। फिर आप एक चौड़ाई और/या ऊंचाई निर्दिष्ट करने में सक्षम होंगे (यानी जैसे कि यह <div /> था)।

स्रोत

2012-06-18 07:30:23 sp00m

यह पूरी तरह से काम करता है, और आपका उत्तर हल्की गति में आया। तुम्हारी चट्टान! बहुत बहुत धन्यवाद। –

यदि आप अर्थशास्त्र के बारे में चिंता करते हैं, तो t1m0thy का जवाब सही विकल्प लगता है। देखें: https://davidwalsh.name/html5-buttons – aldemarcalazans

आप एचटीएमएल 5 का उपयोग कर रहे हैं, तो अर्थात doctype

<!doctype html>

तो तुम सिर्फ block-level links उपयोग कर सकते हैं।

<a href="google.com"> 
    <div class="hello"> 
    .. 
    </div> 
</a>

स्रोत

2012-06-18 07:29:46 Alex

हाँ आप कर सकते हैं यदि आप एचटीएमएल 5 उपयोग कर रहे हैं, इस कोड वैध है अन्यथा नहीं:

<a href="#foo"><div>.......</div></a>

आप एचटीएमएल 5 का उपयोग नहीं कर रहे हैं, तो आप अपने लिंक block कर सकते हैं

<a href="#foo" id="link">Click Here</a>

सीएसएस:

#link { 
    display : block; 
    width:100px; 
    height:40px; 
}

सूचना है कि आप केवल अपने लिंक ब्लॉक स्तर तत्व करने के बाद width, height आवेदन कर सकते हैं।

स्रोत

2012-06-18 07:29:53 Sarfraz

इस कोड के पास HTML5 के साथ कुछ भी नहीं है। एचटीएमएल 5 spec शुरू होने से पहले 'प्रदर्शन' संपत्ति सीएसएस में मौजूद है। – poncha

@poncha: शुरुआत में गलत तरीके से मार्कअप, इस बारे में बता रहा था: '

.......

' उदाहरण के लिए 'ए' के अंदर 'div' html5 में मान्य है। – Sarfraz

अब यह बेहतर दिखता है;) इसे +1 किया क्योंकि यह दोनों समाधान प्रदान करता है – poncha

बस एंकर display: block और width/height: 100% बनाएं। उदाहरण के लिए:

.button a { 
    display: block; 
    width: 100%; 
    height: 100%; 
}

jsFiddle: http://jsfiddle.net/4mHTa/

स्रोत

2012-06-18 07:31:10

बिल्कुल मुझे क्या चाहिए, धन्यवाद –

आप प्रदर्शन आज़मा सकते हैं: ब्लॉक या display: inline-ब्लॉक। एक अच्छा ट्यूटोरियल यहां पाया जा सकता है: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

स्रोत

2012-06-18 07:34:17 DZittersteyn

टेक्स्ट लिंक के क्षेत्र को बढ़ाने के लिए आप निम्न सीएसएस का उपयोग कर सकते हैं;

a {  
display: inline-block;  
position: relative;  
z-index: 1;  
padding: 2em;  
margin: -2em; 
}

गद्दी क्षेत्र क्लिक किया जा सकता है कि, नकारात्मक मार्जिन पाठ के रूप में यह होना चाहिए (lapping लिंक पर सावधान रहना) आसपास के प्रवाह रहता है बढ़ जाती है। प्रदर्शन: इनलाइन-ब्लॉक आवश्यक है ताकि मार्जिन और पैडिंग सेट की जा सके और स्थिति को सापेक्ष होने की आवश्यकता हो ताकि ज़ेड-इंडेक्स का उपयोग क्लिक करने योग्य क्षेत्र को किसी भी पाठ के शीर्ष पर रहने के लिए किया जा सके।

स्रोत

2013-12-02 11:54:07 t1m0thy

मेरे मामले में पूरी तरह से काम करता है। –

यह वास्तविक जवाब है * टैग बटन के क्लिक करने योग्य क्षेत्र को बढ़ाने के लिए * – StefansArya

वास्तव में चालाक! –

padding एंकर टैग के सीएसएस वर्ग में जोड़ें। यदि आवश्यक हो, तो padding-top, padding-bottom, ... व्यक्तिगत रूप से क्लिक करने योग्य क्षेत्र के अनुसार जोड़ें। यह मेरे लिए काम किया।

स्रोत

2014-05-07 06:56:18 Ramesh

<a> टैग बटन के क्लिक करने योग्य क्षेत्र को कैसे बढ़ाया जाए?

उत्तर

संबंधित मुद्दे