अपने कंटेनर की शेष चौड़ाई को भरने के लिए शैली इनपुट तत्व

Question

मान लीजिए कि मेरे पास इस तरह एक html स्निपेट है:

<div style="width:300px;">
    <label for="MyInput">label text</label>
    <input type="text" id="MyInput" />
</div>

यह मेरा सटीक कोड नहीं है, लेकिन महत्वपूर्ण बात यह है कि एक निश्चित चौड़ाई वाले कंटेनर में एक ही लाइन पर एक लेबल और एक टेक्स्ट इनपुट है। मैं रैपिंग के बिना और लेबल के आकार को जाने बिना कंटेनर की शेष चौड़ाई को भरने के लिए इनपुट कैसे कर सकता हूं?

Comments

मुझे पता है कि प्रश्न बहुत समय पहले था, लेकिन मैं अच्छा समाधान जोड़ूंगा जो निश्चित रूप से पुराना नहीं है।

— danijar

Answer 1

हर कोई लेआउट के लिए तालिकाओं से नफरत करता है, वे इस तरह से सामान के साथ मदद करते हैं, या तो स्पष्ट टेबल टैग का उपयोग करते हैं या प्रदर्शन का उपयोग करते हैं: टेबल-सेल

<div style="width:300px; display:table">
    <label for="MyInput" style="display:table-cell; width:1px">label&nbsp;text</label>
    <input type="text" id="MyInput" style="display:table-cell; width:100%" />
</div>

Comments

इस IE6 के साथ काम करेंगे? अन्यथा मुझे वास्तव में इसके लिए एक छोटी तालिका को परिभाषित करना पड़ सकता है :(

— जोएल कोएहॉर्न

यकीन नहीं है, मैं कहूंगा कि वे क्या करते हैं, यह देखने के लिए एक त्वरित परीक्षण करेंगे, लेकिन मेरे पास IE के लिए आसान पहुंच नहीं है

— 16

यह ठीक है: इसने मुझे उस चीज़ की ओर इशारा किया जो काम करती है।

— जोएल कोएहॉर्न

जोएल साझा करने के लिए देखभाल?

— जॉन

सहमत, आपको अपना वास्तविक समाधान हममें से बाकी लोगों के साथ साझा करना चाहिए , और यह चिन्हित करना चाहिए कि उत्तर के रूप में - जैसा है, यह कष्टप्रद है।

— BrainSlugs83

Answer 2

यहां जावास्क्रिप्ट या टेबल लेआउट हैक्स का उपयोग किए बिना एक सरल और साफ समाधान है। यह इस उत्तर के समान है: इनपुट पाठ ऑटो चौड़ाई 100% अन्य तत्वों के साथ तैर रही है

इनपुट क्षेत्र को एक स्पैन के साथ लपेटना महत्वपूर्ण है जो कि है display:block। अगली बात यह है कि बटन को पहले और इनपुट क्षेत्र को दूसरे स्थान पर आना है।

फिर आप बटन को दाईं ओर फ्लोट कर सकते हैं और इनपुट फ़ील्ड शेष स्थान को भरता है।

form {
    width: 500px;
    overflow: hidden;
    background-color: yellow;
}
input {
    width: 100%;
}
span {
    display: block;
    overflow: hidden;
    padding-right:10px;
}
button {
    float: right;
}

<form method="post">
     <button>Search</button>
     <span><input type="text" title="Search" /></span>
</form>

एक साधारण फिडेल: http://jsfiddle.net/v7YTT/90/

अद्यतन 1: यदि आपकी वेबसाइट केवल आधुनिक ब्राउज़रों की ओर लक्षित है, तो मैं लचीले बक्से का उपयोग करने का सुझाव देता हूं । यहां आप वर्तमान समर्थन देख सकते हैं ।

अद्यतन 2: यह भी कई बटन या अन्य तत्वों के साथ काम करता है जो इनपुट क्षेत्र के साथ पूर्ण साझा करते हैं। यहाँ एक उदाहरण है ।

Comments

यह html को बदलता है, हालाँकि: जिस आइटम को आप अंत में चाहते हैं, उसे पहले html में सूचीबद्ध किया गया है।

— जोएल कोएहॉर्न

@JoelCoehoorn, यह सही है। यह आपका निर्णय है कि आप एक तालिका का उपयोग करना पसंद करते हैं या नहीं।

— दानीझार

यह बहुत अच्छा काम करता है। फ़्लोट का उपयोग करें: फ़ेसबुक स्टाइल टैगर या कुछ समान बनाने के लिए दाएं के बजाय बाएं।

— hobberwickey

यह महान काम करता है! लेकिन क्या कोई तर्क देता है कि यह कैसे काम करता है!

— शर्लक ४

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

— रोजर हिल

Answer 3

मैं Flexbox का उपयोग करने का सुझाव देता हूं:

हालांकि उचित विक्रेता उपसर्ग जोड़ना सुनिश्चित करें!

form {
  width: 400px;
  border: 1px solid black;
  display: flex;
}

input {
  flex: 2;
}

input, label {
  margin: 5px;
}

<form method="post">
  <label for="myInput">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input"/>
</form>

Comments

सवाल बहुत पुराना है ... शायद यह है कि मैं इसे आज कैसे करूँगा। यदि मुझे इसे आज़माने का मौका मिलता है, और यह मेरे लिए आवश्यक सभी ब्राउज़रों के साथ काम करता है, तो मैं स्वीकृत उत्तर को अपडेट करूंगा। शायद, हालांकि, मुझे यह कोशिश करने से पहले एक लंबा समय होगा। अब मैं sys के एडमिन टीम पर हूँ, और अधिक वेब सामग्री को न करें।

— जोएल कोएहॉर्न

आप एक का उपयोग कर एक उदाहरण प्रदान कर सकते हैं label? मुझे विशेष रूप से दिलचस्पी होगी कि मूल प्रश्न से HTML का उपयोग कैसे लेआउट किया जा सकता है border-box...

— lacco

क्यों flex: 2और क्या नहीं flex: 1?

— इलियस कर्ट

Answer 4

इसके लिए कृपया flexbox का उपयोग करें। आपके पास एक कंटेनर है जो अपने बच्चों को एक पंक्ति में फ्लेक्स करने जा रहा है। पहला बच्चा आवश्यकतानुसार अपनी जगह लेता है। शेष सभी जगह लेने के लिए दूसरा फ्लेक्स:

<div style="display:flex;flex-direction:row">
    <label for="MyInput">label&nbsp;text</label>
    <input type="text" id="MyInput" style="flex:1" />
</div>

Comments

हाय पांच! :) जोड़ने के लायक एक बात (हम में से कई के संदर्भ में अभी भी फ्लेक्सबॉक्स मॉडल को गले लगाते हुए): कि INPUT एक फार्म में होगा, जो बदले में समग्र फ्लेक्स कंटेनर में समाप्त हो सकता है (जैसे अन्य, गैर-फॉर्म सामान के साथ) ), और फिर यह काम नहीं करेगा - क्योंकि फ्लेक्स व्यवहार केवल प्रत्यक्ष वंशज (यानी बच्चे के तत्वों) पर लागू होता है । इसलिए, FORM को एक फ्लेक्स कंट्रेनर होना चाहिए!

— एस.जे.

फ्लेक्स-दिशा पहले rowसे ही डिफ़ॉल्ट रूप से है, आपको इसे निर्दिष्ट करने की आवश्यकता नहीं है।

— फेबियन पॉनिकॉन

जीत के लिए फ्लेक्स (फिर से); 2019 में बहुत ही प्रासंगिक जवाब

— secretwep

Answer 5

इसे प्राप्त करने का सबसे आसान तरीका होगा:

सीएसएस:

label{ float: left; }

span
{
    display: block;
    overflow: hidden;
    padding-right: 5px;
    padding-left: 10px;
}

span > input{ width: 100%; }

HTML:

<fieldset>
    <label>label</label><span><input type="text" /></span>
    <label>longer label</label><span><input type="text" /></span>
</fieldset>

ऐसा लगता है: http://jsfiddle.net/JwfRX/

Comments

यह मेरे लिए अच्छा काम करता है। अतिप्रवाह चीजों को लपेटने से बचाता है, पैडिंग-राइट सही पक्ष को कटा हुआ होने से बचाता है।

— प्रो वॉन लेमोंगलर

पुनश्च: आधुनिक ब्राउज़र के साथ मैं फ्लेक्स-बॉक्स का उपयोग करने की सलाह

— दूंगा,

Answer 6

बहुत आसान ट्रिक है CSS calcफॉर्मूला का इस्तेमाल करना । सभी आधुनिक ब्राउज़रों, IE9, मोबाइल ब्राउज़रों की विस्तृत श्रृंखला को इसका समर्थन करना चाहिए।

<div style='white-space:nowrap'>
  <span style='display:inline-block;width:80px;font-weight:bold'>
    <label for='field1'>Field1</label>
  </span>
  <input id='field1' name='field1' type='text' value='Some text' size='30' style='width:calc(100% - 80px)' />
</div>

Comments

यह मानता है कि आप लेबल की सही चौड़ाई जानते हैं या अतिरिक्त स्थान के लिए तैयार हैं।

— नेल्सन रॉथमेल

Answer 7

आप यह कोशिश कर सकते हैं:

div#panel {
    border:solid;
    width:500px;
    height:300px;
}
div#content {
	height:90%;
	background-color:#1ea8d1; /*light blue*/
}
div#panel input {
	width:100%;
	height:10%;
	/*make input doesnt overflow inside div*/
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	/*make input doesnt overflow inside div*/
}

<div id="panel">
  <div id="content"></div>
  <input type="text" placeholder="write here..."/>
</div>

Comments

सबसे अच्छी विधि आज

— yota

Answer 8

यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं:

<form class="d-flex">
  <label for="myInput" class="align-items-center">Sample label</label>
  <input type="text" id="myInput" placeholder="Sample Input" class="flex-grow-1"/>
</form>

बेहतर अभी तक, बूटस्ट्रैप में जो बनाया गया है उसका उपयोग करें:

  <form>
    <div class="input-group">
      <div class="input-group-prepend">
        <label for="myInput" class="input-group-text">Default</label>
      </div>
      <input type="text" class="form-control" id="myInput">
    </div>
  </form>

https://jsfiddle.net/nap1ykbr/