larghezza testo automatico di ingresso imbottitura 100% con altri elementi galleggianti

Question

ho il seguente layout per una casella di ricerca con:

<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>​ 

(la sua molto semplificata per scopi che mostrano)

• Il titolo in lo "scope" è un testo che può essere di lunghezza variabile

Quello che mi piace è avere l'elemento di testo di input per riempire tutto lo spazio disponibile (cioè lo spazio giallo), mantenendo il pulsante di ricerca a destra.

Full example with the CSS is in a fiddle

Quale sarebbe il modo più semplice per ottenere una soluzione di lavoro in IE7 +, FF, Safari, ecc ...?

Grazie!

Answer 1

Ti piace questo?

DEMO: 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>​ 

CSS:

#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

hey è possibile utilizzare le proprietà di messa a fuoco nel campo di input come come questo

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

<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> 

Demo online http://jsfiddle.net/rohitazad/v7YTT/1/

Answer 3

Hai bisogno di qualcosa del genere:

#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;}