<Span> टैग की सीएसएस चौड़ाई


82

मैं उपयोग करता हूं <span> अपने मॉड्यूल शीर्षक में टैग का हूं, जैसे

<span>Categories</span>.

मैं सीएसएस में स्पैन की पृष्ठभूमि का रंग / छवि, चौड़ाई और ऊंचाई निर्दिष्ट करता हूं।

लेकिन स्पैन की चौड़ाई इसकी सामग्री / पाठ पर निर्भर करती है।

इसलिए, अगर मैं करता हूँ <span></span> सीएसएस में सिर्फ एक पृष्ठभूमि छवि / रंग के साथ, कुछ भी नहीं दिखाई देता है।

बेशक, मैं कुछ प्रकट करना चाहता हूं।

मैं इसे कैसे हल करूं?


4
मैं यह बताना चाहूंगा कि यह स्पैन का बहुत अच्छा उपयोग नहीं है। इसका मतलब है कि सामग्री की छोटी श्रेणियों को एक पूरे के भीतर चिह्नित करना, इसलिए यह जानबूझकर डिफ़ॉल्ट रूप से एक ब्लॉक तत्व नहीं है। शीर्षकों के लिए, h # टैग में से एक सबसे अच्छा होगा। असफल होना, एक div अभी भी एक स्पैन से बेहतर है।
चक

आपके उत्तर के लिए धन्यवाद ..: D मैं इसे एक मूर्खतापूर्ण q'n के साथ शुरू करने के लिए खोजता हूं। कई साल पहले ही। =))
मंगल- o

जवाबों:


115

आप स्पष्ट रूप से प्रदर्शन संपत्ति को "ब्लॉक" करने के लिए सेट कर सकते हैं, इसलिए यह ब्लॉक स्तर के तत्व की तरह व्यवहार करता है, लेकिन उस स्थिति में आपको शायद इसके बजाय एक div का उपयोग करना चाहिए।

<span style="display:block; background-color:red; width:100px;"></span>

धन्यवाद, मैं देख रहा हूँ ऐसा इसलिए होता है क्योंकि स्पैन इनलाइन है। मैं अब अंतर शर्त देखता हूं। इनलाइन और ब्लॉक प्रदर्शित करता है। हां, div उपयुक्त है ।
डी..थैंक

4
पैराग्राफ के अंदर एक डीआईवी का उपयोग करना, हेडर (एच 1, एच 2 आदि) यदि आप उस बारे में परवाह करते हैं, तो सत्यापन टूट जाएगा। एक अन्य संभव शोला एक स्पैन का उपयोग करना है, प्रदर्शन: ब्लॉक; और फ्लोट: बाएं; :)
सिवद

धन्यवाद, और नीचे दिए गए उत्तर को काम की चौड़ाई प्राप्त करने के लिए महत्वपूर्ण था
सत्चेल

3
इसके inline-blockबजायblock
यूजेन कोनकोव

125

डिफ़ॉल्ट इनलाइन शैली, जो आप की चौड़ाई निर्दिष्ट नहीं कर सकते हैं।

display: inline-block;

IE इसे समर्थन नहीं करता है, सिवाय एक अच्छा तरीका होगा

हालाँकि, आप कई ब्राउज़र समाधान हैक कर सकते हैं


2
मेरा मानना ​​है कि IE कम से कम 6 संस्करण के बाद से इनलाइन-ब्लॉक का समर्थन करता है। मुझे लगता है कि यह केवल इनलाइन-ब्लॉक का समर्थन करता है यदि इसका लागू तत्व स्वाभाविक रूप से इनलाइन है (जो कि <span> है)।
केन ब्राउनिंग

3
हां, IE इनलाइन-ब्लॉक का समर्थन करता है। इसका समर्थन सूक्ष्म रूप से भिन्न है, लेकिन यह इस मामले में काम करेगा।
थोमसट्रेटर

बहुत बढ़िया! प्रदर्शन में वास्तविक अंतरों को समझना शुरू करना:
डीन मीहान

6

आप प्रदर्शन इनलाइन के साथ एक तत्व की चौड़ाई निर्दिष्ट नहीं कर सकते। आप इसमें एक गैर-ब्रेकिंग स्पेस () की तरह कुछ डाल सकते हैं और फिर इसे कुछ और चौड़ाई देने के लिए पैडिंग सेट कर सकते हैं लेकिन आप इसे सीधे नियंत्रित नहीं कर सकते।

आप डिस्प्ले इनलाइन-ब्लॉक का उपयोग कर सकते हैं लेकिन यह व्यापक रूप से समर्थित नहीं है।

एक असली हैक एक छवि को अंदर रखना होगा और फिर उस की चौड़ाई सेट करना होगा। पारदर्शी 1 पिक्सेल GIF जैसा कुछ। हालांकि अनुशंसित दृष्टिकोण नहीं है।


3

मैं paddingविशेषता का उपयोग करूंगा । यह आपको तत्वों के किसी भी हिस्से में पिक्सेल की एक निर्धारित संख्या को जोड़ने की अनुमति देगा, जिसमें तत्व के बिना इसके स्पैन गुण खो सकते हैं:

  • यह एक ब्लॉक नहीं बनेगा
  • जैसा कि आप उम्मीद करते हैं, यह फ्लोट करेगा

यह विधि केवल पैडिंग में जोड़ देगी, इसलिए यदि आप सामग्री की लंबाई (उदाहरण के लिए, श्रेणियाँ से टैग तक) बदलते हैं, तो सामग्री का आकार बदल जाएगा और तत्व का समग्र आकार भी बदल जाएगा। लेकिन अगर आप वास्तव में एक कठोर आकार निर्धारित करना चाहते हैं, तो आपको ऊपर बताए अनुसार और एक div का उपयोग करना चाहिए।

बॉक्स मॉडल, सामग्री, गद्दी, मार्जिन आदि के बारे में अधिक जानकारी के लिए बॉक्स मॉडल देखें ।


3

अन्य उत्तरों की तरह, इस के साथ अपनी स्पैन विशेषताएँ शुरू करें:

display:inline-block;  

अब आप चौड़ाई से अधिक पैडिंग का उपयोग कर सकते हैं :

padding-left:6%;
padding-right:6%;

जब आप गद्दी का उपयोग करते हैं, तो आपका रंग दोनों तरफ (दाएं और बाएं) तक फैलता है , न कि केवल दाएं (जैसे कि विधवा में)।


2

उदाहरण के रूप में विशेषता 'प्रदर्शन' का उपयोग करें:

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>

1

यदि आपने शोलुद की ऊंचाई और चौड़ाई तय कर ली है, तो यह बताएं कि यदि पाठ के अंदर का भाग उसके क्षेत्र से अधिक हो जाए तो कैसे करें। इसलिए सीएसएस में जोड़ें

अतिप्रवाह: ऑटो;

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.