इनलाइन तत्व की चौड़ाई कैसे सेट करें?

Question

मैं एक टैब हेडर डिज़ाइन करना चाहता हूं। एचटीएमएल कोड

<div class="tab-header"> 
    <a href="" class="current">tab1-title</a> 
    <a href="">tab2-title</a> 
</div> 

अब मैं भी, वर्तमान वर्ग के लिए एक पृष्ठभूमि चित्र लागू इस तरह प्रभाव बनाने की जरूरत है,

लेकिन इनलाइन तत्व एक इस पृष्ठभूमि छवि के लिए काफी बड़ा नहीं है , इसलिए मैं तत्व की चौड़ाई और ऊंचाई समायोजित करता हूं। लेकिन समायोजन विफल रहा, तत्व की चौड़ाई/ऊंचाई नहीं बदली।

मुझे सही प्रभाव कैसे मिल सकता है?

धन्यवाद।

Answer 1

चौड़ाई लागू करने के लिए, सीएसएस संपत्ति 'डिस्प्ले' को या तो 'ब्लॉक' या 'इनलाइन-ब्लॉक' पर सेट करें।

ब्लॉक: तत्व एक ही पंक्ति में बैठेगा। ऐसे मामले में आप फ्लोट सेट करना चाहते हैं ताकि लिंक एक ही पंक्ति में हों;

इनलाइन-ब्लॉक; तत्व की ऊंचाई, चौड़ाई, आदि होगी, और एकाधिक तत्व एक ही पंक्ति (ब्लॉक) में बैठेंगे।

Answer 2

आपको एंकर पर display:block का उपयोग करना होगा।

Answer 3

उपयोग

display: inline-block; 

इनलाइन तत्व पर। थोड़ा tweaking के साथ, यह व्यापक क्रॉस ब्राउज़र समर्थन है और आप के बाद के लेआउट के लिए अविश्वसनीय रूप से उपयोगी है।

Answer 4

सेट inline-block करने के लिए display संपत्ति, और फिर आप width, height सेट कर सकते हैं, और vertical-align आवश्यक के रूप में।