मैं अपने लेबल के समान लाइन पर एक इनपुट तत्व कैसे डाल सकता हूं?

Question

मैं एक ही लाइन पर label और input[type=text] डालना चाहता हूं, और लेबल के पाठ की लंबाई के बावजूद, मैं 0 तत्वों की शेष चौड़ाई को भरने के लिए input की चौड़ाई को देखना चाहता हूं (पहली छवि देखें) ।

मैंने input के लिए उपयोग करने का प्रयास किया, लेकिन ऐसा लगता है कि यह एक स्थिर चौड़ाई है। मैंने width: 100%; भी कोशिश की, लेकिन यह input को एक नई लाइन में ले जाता है (दूसरी छवि देखें)।

मैं इस सीएसएस का उपयोग कर प्राप्त कर सकते हैं?

Answer 1

यह जावास्क्रिप्ट के बिना संभव है, देखें: http://jsfiddle.net/Khmhk/

यह IE7 + और सभी आधुनिक ब्राउज़रों में काम करता है।

HTML:

<label for="test">Label</label> 
<span><input name="test" id="test" type="text" /></span> 

सीएसएस:

label { 
    float: left 
} 
span { 
    display: block; 
    overflow: hidden; 
    padding: 0 4px 0 6px 
} 
input { 
    width: 100% 
} 

कारण है कि overflow: hidden इस उदाहरण में तो जादुई उपयोगी है explained here है।

---

display: table-cell एक और विकल्प है, देखें: http://jsfiddle.net/Khmhk/1/

यह works in IE8+ और सभी आधुनिक ब्राउज़रों:

HTML:

<div class="container"> 
    <label for="test">Label</label> 
    <span><input name="test" id="test" type="text" /></span> 
</div> 

सीएसएस:

.container { 
    display: table; 
    width: 100% 
} 
label { 
    display: table-cell; 
    width: 1px; 
    white-space: nowrap 
} 
span { 
    display: table-cell; 
    padding: 0 0 0 5px 
} 
input { 
    width: 100% 
} 

Answer 2

यह अभी भी मेरे लिए काम करता है, लेकिन एफटीआर इस तरह बूटस्ट्रैप 3 करता है (@morten.c's answer to "Bootstrap full-width text-input within inline-form" के लिए धन्यवाद)। पता नहीं है कि @ थर्डॉट, या कुछ भी तोड़ना मुश्किल है या नहीं। लेकिन यहां यह है, और here's a fiddle जो एक संकीर्ण-स्क्रीन ब्रेक पॉइंट से निपटने का मूल उदाहरण भी देता है।

HTML:

<form class="responsive"> 
    <input type="text" placeholder="wide input..."/> 
    <span> 
     <input type="submit"/> 
    </span> 
</form> 

सीएसएस:

form.responsive, form.responsive * { 
    box-sizing: border-box; 
    width: 100%; 
    height: 40px !important; /* specify a height */ 
} 
form.responsive { 
    position: relative; 
    display: table; 
    border-collapse: separate; 

    /* just to be safe */ 
    border: 0; 
    padding: 0; 
    margin: 0; 
} 
form.responsive > input { 
    position: relative; 
    width: 100%; 
    float:left; 
    margin-bottom: 0; 
    display: table-cell; 
} 
form.responsive span { 
    position: relative; 
    width: 1%; 
    vertical-align: middle; 
    display: table-cell; 
} 
form.responsive span input { 
    margin: 0; 
    margin-left: -1px; 
    display: inline-block; 
    vertical-align: middle; 
    overflow: visible; 
}