मेरा असली प्रोजेक्ट एम्बेडेड स्टाइलिंग या पृष्ठभूमि रंगों का उपयोग नहीं कर रहा है। उन्हें केवल समस्या निवारण उद्देश्यों के लिए जोड़ा गया है।

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

<label for="phoneNumber">Home Phone</label>
<div style="background:blue;">
	<div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
	<div style="background:red;"><input type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>

यह देखते हुए कि मैं टेक्स्ट इनपुट को 100% मूल div (यानी लाल रंग में क्षेत्र) भरना चाहता हूं, मेरी पहली प्रवृत्ति style="width:100%;" लिखना है लेकिन इसका वांछित परिणाम नहीं है। निचे देखो।

<label for="phoneNumber">Home Phone</label>
<div style="background:blue;">
	<div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
	<div style="background:red;"><input style="width:100%;" type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>

मैं टेक्स्ट इनपुट को लाल रंग में दिखाए गए क्षेत्र को कैसे भरूं?

5
Jonathon Philip Chambers 7 अगस्त 2018, 09:47

4 जवाब

सबसे बढ़िया उत्तर

नीचे की तरह flex का प्रयोग करें।

पैरेंट डिव पर display: flex और दूसरे इनपुट के पैरेंट डिव पर flex: 1 0 auto; और दूसरे इनपुट पर चौड़ाई 100% जोड़ें।

<label for="phoneNumber">Home Phone</label>
<div style="background: :blue; display: flex;">
  <div style="background:yellow;;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
  <div style="background:red;flex: 1 0 auto;">
    <input type="tel" name="phone" id="phoneNumber" autocomplete="tel" style="    width: 100%;"></div>
</div>
4
Nandita Sharma 7 अगस्त 2018, 09:58
मुझे लगता है कि इसे समझने के लिए मुझे इस कोड का अध्ययन करने में कुछ समय बिताना होगा, लेकिन यह निश्चित रूप से वांछित परिणाम प्राप्त करता है। मैंने यह देखने के लिए ब्राउज़र की चौड़ाई के साथ भी खेला कि क्या मैं इसे तोड़ सकता हूं। मैं नहीं कर सका। बहुत बढ़िया।
 – 
Jonathon Philip Chambers
7 अगस्त 2018, 10:04
आपको यह जानकर खुशी होगी, मैंने अभी आपका समाधान लागू किया है और इसने पूरी तरह से काम किया है। (जब मैंने अपने कोड में कुछ और बगों को सुलझाया।) "flex: 1 0 auto;" क्या करता है, यह समझाने वाला एक अच्छा लेख खोजना आश्चर्यजनक रूप से कठिन था, लेकिन यह बुरा नहीं था।
 – 
Jonathon Philip Chambers
8 अगस्त 2018, 05:47

क्या आप ऐसा करने की कोशिश कर रहे हैं:

<div style="float:left;">
    <label for="phoneNumber">Home Phone</label>
	<div style="background:yellow; ">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)
	<input style="width:70%;" type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>
0
Sinto 7 अगस्त 2018, 09:57

जैसा कि मैं आपके कोड में देख सकता हूं कि आपने width:20px; एक div (पीला) दिया है, इसलिए पैरेंट div (नीला) में शेष स्थान 100% नहीं है, इसलिए जब आप चौड़ाई देते हैं: डिव (लाल) के अंदर इनपुट के लिए 100% यह टूट जाता है और 100% लेने के लिए अगली पंक्ति में आता है; चौड़ाई। इसलिए चौड़ाई 100% से कम दें;

आपकी समझ के लिए मैंने चौड़ाई अपडेट कर दी है, निम्न कोड जांचें।

<label for="phoneNumber">Home Phone</label>
<div style="background: :blue;">
  <div style="background:yellow; float:left;">(<input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)</div>
  <div style="background:red;"><input style="width:94%;" type="tel" name="phone" id="phoneNumber" autocomplete="tel"></div>
</div>
0
Ronit Mukherjee 7 अगस्त 2018, 09:57
मैं इसे समझता हूं, लेकिन मुझे इसे सभी ब्राउज़र चौड़ाई के लिए सही ढंग से प्रदर्शित करने की आवश्यकता है।
 – 
Jonathon Philip Chambers
7 अगस्त 2018, 10:00
प्रदर्शन प्रकार फ्लेक्स का उपयोग करें; उस पर विवरण के लिए। बेझिझक टिप्पणी करें, मुझे आपकी मदद करने में खुशी होगी।
 – 
Ronit Mukherjee
7 अगस्त 2018, 10:09
<label for="phoneNumber">Home Phone</label>
<div style="background: :blue;width:100%;">
  <div style="background:yellow; float:left;width: 7%;">(
  <input style="width:20px;" type="tel" name="ext" id="phoneNumberExt" autocomplete="tel">)
  </div>
  <div style="background:red;float: right;width: 93%;">
    <input  type="tel" name="phone" id="phoneNumber" autocomplete="tel" style="    width: 100%;">
  </div>
</div>
0
Charu Maheshwari 7 अगस्त 2018, 10:01