लेआउट

Question

को प्रभावित किए बिना इन-लाइन लिंक के क्लिक करने योग्य क्षेत्र को बनाना, मैं वास्तव में पहुंच के लिए लिंक के क्लिक करने योग्य क्षेत्र को अधिक से अधिक बनाने के लिए देख रहा हूं क्योंकि लक्षित उपयोगकर्ताओं के लिए उन्हें मारना मुश्किल हो सकता है। आकार के बारे में 1.5x उचित हो सकता है। ये सामान्य पाठ में लिंक हैं, इसलिए मैं वास्तव में उन्हें बड़ा नहीं कर सकता जो लेआउट को गड़बड़ कर देगा।

मैं इसे पूरा करने के लिए एचटीएमएल 5, CSS3, जेएस या यहां तक ​​कि मोज़िला विशिष्ट विशेषताओं का उपयोग करता हूं क्योंकि नवीनतम फ़ायरफ़ॉक्स संस्करण एकमात्र लक्ष्य है, हालांकि इस तरह के हैक की बजाय मूल सीएसएस/एचटीएमएल काफी बेहतर होगा!

Answer 1

एक विकल्प जो काम कर सकता है :after छद्म-तत्व का उपयोग करना है। इस तरह कुछ:

a { 
    position: relative 
} 
.bigger:after{ 
    content:""; 
    padding: 50px; 
    position: absolute; 
    left: -25px; 
    top: -25px; 
} 

नंबरों को आपकी पसंद के अनुसार tweaked किया जा सकता है। केवल डाउनसाइड मैं तुरंत देख सकता हूं अगर आपको प्री-आईई 8 का समर्थन करने की ज़रूरत है। http://caniuse.com/#feat=css-gencontent

यहां एक fiddle है।

Answer 2

आप इसे एक बड़े पैडिंग का उपयोग करके कर सकते हैं।

उदाहरण के लिए:

.a{ 
    padding: 20px; 
    margin: -20px; //lets keep the layout 
} 

यहाँ आप एक जीवित उदाहरण है: http://jsfiddle.net/u5kuJ/1/

अपडेट किया गया:

अपने बेला के साथ

: http://jsfiddle.net/XXgqu/1/

Answer 3

मैं बहुत यकीन है कि आप नहीं कर सकते जो भी आप पूछ रहे हैं करो दिमाग में आने वाली एकमात्र चीजें पैडिंग, मार्जिन और लाइन-ऊंचाई जोड़ रही हैं। हालांकि यह मेरा पसंदीदा समाधान नहीं है, लेकिन साइट के संदर्भ के आधार पर, शायद सूचीबद्ध सभी लिंक के साथ एक पृष्ठ है, जिसमें एक बड़ा लक्ष्य है।

इसके अलावा, हो सकता है अच्छा विपरीत के साथ outline & outline-offset सीएसएस गुणों का उपयोग लोगों को पता है लिंक पर जाने के लिए कर रहे हैं।

एक और बात यह है कि, जिन लोगों को एक बड़ा लक्ष्य चाहिए, कीबोर्ड को अक्सर वेबसाइट पर नेविगेट करने के लिए उपयोग करें, इसलिए आपकी साइट को और अधिक कीबोर्ड अनुकूल बनाने में मदद मिल सकती है। उदाहरण के लिए, क्या आपके पास कोड के माध्यम से हेडर और साइडबार है, क्या वे मुख्य सामग्री से पहले आते हैं? यदि ऐसा है तो skip nav लिंक, या कुछ (लेआउट के आधार पर) को रखने में भी मदद मिल सकती है।

Answer 4

मैंने गेटोहेल्स जवाब के लिए एक अद्यतन किया है, यह पाठ की लंबाई के साथ काम करेगा, फिर कुछ पैडिंग जोड़ें।

http://jsfiddle.net/vG7UY/2/

a { 
    position: relative; 
} 
    .biggerForMobile:before{ 
    content:""; 
    width:100%; 
    height:100%; 
    position:absolute; 
    padding:12px; 
    top:-10px; 
    left:-10px; 
} 

Answer 5

आप पैड तत्व को :after छद्म तत्व का उपयोग कर सकते हैं, और transform का उपयोग करने और position आप अन्य तत्वों को प्रभावित किए बिना गद्दी तत्व के केंद्र पर केंद्रित रख सकते हैं।

padding: 30px को जो भी पैडिंग चाहिए, उसे बदलें।

.padded-click { 
    position: relative; 
} 
.padded-click:after{ 
    padding: 30px; 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

नोट: यह gotohales समाधान है, जो एक महान दृष्टिकोण है, लेकिन ऊपर और gotohales समाधान के रूप में पिक्सल मूल्यों के साथ छोड़ दिया है के प्रयोग पर आधारित करता खाते में तत्व की चौड़ाई/ऊंचाई लेने हम गद्दी अन्यथा रहे हैं की आवश्यकता है पैडिंग केंद्र से दूर हो जाएगा।