इनपुट लेख स्वत: चौड़ाई चल अन्य तत्वों के साथ 100% भरने

Question

मेरे पास है के साथ एक खोज बॉक्स के लिए निम्नलिखित लेआउट:

<div id="emulating_variable_width"> 
    <form id="srxForm" method="post"> 
    <div id="qsrxSearchbar">    
     <div id="scope"> Person Name </div> 
     <input type="text" id="theq" title="Search"> 
     <button id="btnSearch" type="button">Search</button> 
     </div> 
    </form>  
</div>​ 

(इसकी बहुत ज्यादा दिखा प्रयोजनों के लिए सरलीकृत)

• में शीर्षक 'स्कोप' एक पाठ है जो लंबाई

मुझे क्या पसंद आएगा सभी उपलब्ध स्थान (यानी पीले स्थान) को भरने के लिए इनपुट टेक्स्ट तत्व रखना है, जबकि रखते हुए दाईं ओर स्थित खोज बटन।

Full example with the CSS is in a fiddle

कौन सा सबसे आसान तरीका है एक समाधान IE7 +, एफएफ, सफारी, आदि में काम कर पूरा करने के लिए किया जाएगा ...?

धन्यवाद!

Answer 1

इस तरह?

डेमो: http://jsfiddle.net/v7YTT/19/

HTML:

<div id="emulating_variable_width"> 
    <form id="srxForm" method="post"> 
     <div id="qsrxSearchbar"> 
      <button id="btnSearch">Search</button>    
      <label id="scope"> Person Name </label> 
      <span><input type="text" id="theq" title="Search" /></span> 
     </div> 
    </form> 
</div>​ 

सीएसएस:

#qsrxSearchbar 
{ 
    width: 500px; 
    height: 100px; 
    overflow: hidden; 
    background-color: yellow; 
} 

#qsrxSearchbar input 
{ 
    width: 100% 
} 

#qsrxSearchbar label 
{ 
    float: left 
} 

#qsrxSearchbar span 
{ 
    display: block; 
    overflow: hidden; 
    padding: 0 5px 
} 

#qsrxSearchbar button 
{ 
    float: right 
} 

#qsrxSearchbar input, .formLine button 
{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box 
} 

Answer 2

अरे आप

<div id="emulating_variable_width"> 
    <form id="srxForm" method="post"> 
     <div id="qsrxSearchbar">    
      <div id="scope"> Person Name </div> 
      <input type="text" id="theq" title="Search"> 
      <button id="btnSearch" type="button">Search</button> 
      </div> 
    </form>  
</div> 

लाइव डेमो इस

Css

#emulating_variable_width{ 
    width:500px; 

    height:100px; 
    background-color:yellow; 
} 
input { 
    width:auto; 
    /*width:100%;*/ 
    float:left; 
    width:100px; 
    font-size: 17px; 
} 
#scope{float:left;} 
button{float:left;} 

input:focus{ 
width:200px; 
} 

HTML की तरह के रूप में इनपुट क्षेत्र में ध्यान केंद्रित करने के गुण के लिए इस्तेमाल किया जा सकता है http://jsfiddle.net/rohitazad/v7YTT/1/

Answer 3

आपको इस तरह कुछ चाहिए:

#emulating_variable_width{ 
    width:500px; 

    height:100px; 
    background-color:yellow; 
} 

input { 
    width:320px; 
    /*width:100%;*/ 
    float:left; 
    font-size: 17px; 
} 
#scope{float:left;} 
button{float:left;}