de entrada ancho de texto automático de llenado 100% con otros elementos flotantes

Question

i tienen la siguiente distribución para un cuadro de búsqueda 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>​ 

(su muy simplificado para mostrar los propósitos)

• El título de el 'alcance' es un texto que puede ser variable en longitud

lo que me gustaría es tener el elemento de texto de entrada para llenar todo el espacio disponible (es decir, espacio de color amarillo), mientras se mantiene el botón de búsqueda a la derecha.

Full example with the CSS is in a fiddle

¿Cuál sería la forma más fácil de lograr una solución de trabajo en IE7 +, FF, Safari, etc ...?

Gracias!

Answer 1

¿Le gusta?

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 que puede hacer servir las propiedades de enfoque en el campo de entrada como esta

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> 

Demostración en directo http://jsfiddle.net/rohitazad/v7YTT/1/

Answer 3

Necesita algo como esto:

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