मैं लेबल टैग की चौड़ाई को कैसे नियंत्रित कर सकता हूं?

Question

लेबल टैग में 'चौड़ाई' गुण नहीं है, इसलिए मुझे लेबल टैग की चौड़ाई को कैसे नियंत्रित करना चाहिए?

Comments

लेबल एक इनलाइन तत्व है, इसमें चौड़ाई मान नहीं हो सकता है; ऐसा करने के लिए आपको display:blockया डालने की आवश्यकता है float:left।

— रसेल डायस

Answer 1

सीएसएस का उपयोग, बिल्कुल ...

label { display: block; width: 100px; }

widthविशेषता हटाई गई है, और सीएसएस हमेशा प्रस्तुतिकरण शैलियों की इन प्रकार नियंत्रित करने के लिए इस्तेमाल किया जाना चाहिए।

Comments

लेकिन इससे कोड में एक विराम आ जाता है, जो शायद ओपी पहले स्थान पर नहीं चाहता है।

— कोनराड रूडोल्फ

@ कोनराड तब ओपी उपयोग कर सकते हैं floatयाdisplay: inline-block

— जोश

हाँ, मैं यही चाहता था। :-) यह यहाँ का मुख्य पहलू है, क्योंकि यह कठिन हिस्सा है। केवल सेटिंग widthका बहुत उपयोग नहीं होगा।

— कोनराड रुडोल्फ

@JoshStodola ओह shiiiiit ..... इनलाइन-ब्लॉक मेरे लिए कभी काम नहीं करता था, मैंने फ्लोट और bham की कोशिश की! मुझे आश्चर्य है कि इनलाइन-ब्लॉक ने मेरे लिए काम क्यों नहीं किया

— धीरज

@ लिस्टचाइल्ड इनलाइन-ब्लॉक व्हॉट्सएप को नजरअंदाज नहीं करता है, यही वजह है कि आप इसके साथ समस्या कर रहे थे।

— एलेक्स पॉडवॉर्नी

Answer 2

इनलाइन-ब्लॉक का उपयोग करना बेहतर है क्योंकि यह शेष तत्वों और / या नियंत्रणों को एक नई रेखा में खींचने के लिए मजबूर नहीं करता है।

label {
  width:200px;
  display: inline-block;
}

Answer 3

इनलाइन तत्वों (जैसे SPAN, LABEL, आदि) को प्रदर्शित किया जाता है ताकि उनकी सामग्री के आधार पर उनकी ऊंचाई और चौड़ाई की गणना ब्राउज़र द्वारा की जाए। यदि आप ऊंचाई और चौड़ाई को नियंत्रित करना चाहते हैं तो आपको उन तत्वों के ब्लॉक को बदलना होगा।

display: block;तत्व को एक ठोस ब्लॉक (DIV टैग की तरह) के रूप में प्रदर्शित किया जाता है जिसका अर्थ है कि तत्व के बाद एक लाइन ब्रेक है (यह इनलाइन नहीं है)। यद्यपि आप display: inline-blockलाइन ब्रेक के मुद्दे को ठीक करने के लिए उपयोग कर सकते हैं , यह समाधान IE6 में काम नहीं करता है क्योंकि IE6 इनलाइन-ब्लॉक को नहीं पहचानता है। यदि आप चाहते हैं कि यह क्रॉस-ब्राउज़र संगत हो तो इस लेख को देखें: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

Answer 4

लेबल के लिए चौड़ाई देना एक उचित तरीका नहीं है। आपको इसे प्रबंधित करने के लिए एक div या तालिका संरचना लेनी चाहिए। लेकिन फिर भी अगर आप अपना पूरा कोड नहीं बदलना चाहते हैं तो आप निम्नलिखित कोड का उपयोग कर सकते हैं।

label {
  width:200px;
  float: left;
}

Comments

लेबल तत्व की चौड़ाई को नियंत्रित करने के लिए "उचित तरीके से लेबल में चौड़ाई नहीं देना"? क्या आपको यकीन है?

— ओरिओल

हां .. क्योंकि जब हम कुछ लेआउट या विशिष्ट संरचना बनाना चाहते हैं तो उपयोग करने के लिए div और तालिका गुण प्रदान किए जाते हैं। लेबल का अर्थ चौड़ाई या ऊँचाई देने के लिए नहीं है .. इसलिए यदि हम किसी ऐसी चीज़ का उपयोग करते हैं जो ऐसा करने के लिए नहीं है .. तो यह कुछ तरीकों से मुद्दों को बनाना शुरू कर देगी। मुझे उम्मीद है कि मैं अब समझ बना रहा हूं।

— यक्षिता शाह

Answer 5

label {
  width:200px;
  display: inline-block;
}

OR 

label {
  width:200px;
  display: inline-flex;
}

OR 

label {
  width:200px;
  display: inline-table;
}

Answer 6

आप निश्चित रूप से इस तरह की कोशिश कर सकते हैं

.col-form-label{
  display: inline-block;
  width:200px;}

Answer 7

आप या तो सभी लेबल को वर्ग नाम दे सकते हैं ताकि सभी की चौड़ाई समान हो सके:

 .class-name {  width:200px;}

उदाहरण

.labelname{  width:200px;}

या आप सरल लेबल के बाकी दे सकते हैं

label {  width:200px;  display: inline-block;}