तत्व को शेष चौड़ाई भरने के लिए कैसे करें, जब भाई की चर चौड़ाई हो?

Question

नीचे दिए गए उदाहरण में:

मैं पाठ बॉक्स सभी उपलब्ध स्थान को भरने के लिए चाहते हैं। समस्या यह है कि ड्रॉपडाउन चौड़ाई तय नहीं की जा सकती है, क्योंकि इसके तत्व स्थैतिक नहीं हैं। मैं इसे सिर्फ सीएसएस के साथ हल करना चाहता हूं (यदि संभव हो तो कोई जावास्क्रिप्ट नहीं)। http://jsfiddle.net/ruben_diaz/cAHb8/

यहाँ एचटीएमएल है::

<div id="form_wrapper"> 
    <form accept-charset="UTF-8" action="/some_action" method="post"> 
     <span class="category_dropdown_container"> 
      <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> 
       <option value="1">General</option> 
       <option value="2">Fruits</option> 
       <option value="3">Ice Creams</option> 
       <option value="4">Candy</option> 
      </select> 
     </span> 
     <span class="resizable_text_box"> 
      <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" /> 
     </span> 
     <input name="commit" type="submit" value="Ask!" /> 
    </form> 
</div> 

और यहाँ सीएसएस

मैं समाधान किसी भी भाग्य :(

यहाँ बिना इसी तरह के सवाल करने का प्रस्ताव की कोशिश की है बेला है:

#form_wrapper { 
    border: 1px solid blue; 
    width: 600px; 
    padding: 5px; 
} 
form { 
    display: inline-block; 
    width: 100%; 
} 
.category_dropdown_container { 
} 
.resizable_text_box { 
    border: 1px solid red; 
} 
input[type="text"] { 
} 
input[type="submit"] { 
    background-color: lightblue; 
    width: 80px; 
    float: right; 
} 

Answer 1

Updated demo   (IE7/8/9/10, फायरफॉक्स, क्रोम में ठीक परीक्षण किया, सफारी)

• फ्लोट छोड़ दिया और सही तत्वों।
• एचटीएमएल स्रोत कोड में, पहले दोनों फ़्लोट किए गए तत्वों को रखें (यह सबसे महत्वपूर्ण हिस्सा है)।
• मध्य तत्व overflow: hidden; और 100% की एक आरोही चौड़ाई दें।
• मध्य तत्व में टेक्स्ट बॉक्स को 100% की चौड़ाई दें।

.category_dropdown_container { 
 
    float: left; 
 
} 
 

 
input[type="submit"] { 
 
    float: right; 
 
    ... 
 
} 
 

 
.resizable_text_box { 
 
    padding: 0 15px 0 10px; 
 
    overflow: hidden; 
 
} 
 
.resizable_text_box input { 
 
    width: 100%; 
 
}

<div class="category_dropdown_container"> 
 
    <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> 
 
     ... 
 
    </select> 
 
</div> 
 

 
<input name="commit" type="submit" value="Ask!" /> 
 

 
<div class="resizable_text_box"> 
 
    <input id="question_text_box" name="question[what]" 
 
      placeholder="Write a query..." type="text" /> 
 
</div>

Answer 2

टी में से कुछ बदलें नली <span> तत्व <div> तत्वों के लिए; तो float:left आपके ड्रॉपडाउन के आस-पास विभाजन; फिर दाईं ओर से overflow:hidden और इसके अंदर इनपुट तत्व width:100%; दें।

Here's an example। Here it is again with a bigger drop down।

---

सिवाय इसके कि सबमिट बटन को स्क्रू करें। तो #form_wrapper गैर स्थैतिक स्थिति (position:relative) दें और सबमिट बटन को बिल्कुल सही रखें। this fiddle और this one देखें।

Answer 3

अपेक्षाकृत हाल ही में 'फ्लेक्स' प्रदर्शन सीएसएस संपत्ति

आप के लिए इस समस्या का हल:

तुम सब करने की ज़रूरत परिवर्तन प्रपत्र के displayinline-flex को, .resizable_text_boxflex-grow: 100; और देना है #question_text_boxwidth: 100%

एफ ओपी से ull उदाहरण:

<style> 
#form_wrapper { 
    border: 1px solid blue; 
    width: 600px; 
    padding: 5px; 
} 
form { 
    display: inline-flex; 
    width: 100%; 
} 
.category_dropdown_container { 
} 
.resizable_text_box { 
    border: 1px solid red; 
    flex-grow: 100; 
} 
#question_text_box { 
    width: 100% 
} 
input[type="text"] { 
} 
input[type="submit"] { 
    background-color: lightblue; 
    width: 80px; 
    float: right; 
} 
</style> 

<div id="form_wrapper"> 
    <form accept-charset="UTF-8" action="/some_action" method="post"> 
     <span class="category_dropdown_container"> 
      <select class="chosen chzn-done" name="question[category_id]" id="selQJK"> 
       <option value="1">Options</option> 
      </select> 
     </span> 
     <span class="resizable_text_box"> 
      <input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" /> 
     </span> 
     <input name="commit" type="submit" value="Ask!" /> 
    </form> 
</div> 

फ्लेक्स बॉक्स तुम क्या आप 15 साल के लिए सीएसएस के साथ क्या करना चाहते थे करने की सुविधा देता है - अपने अंत में यहाँ!अधिक जानकारी: https://css-tricks.com/snippets/css/a-guide-to-flexbox/