¿Cómo colocar un cuadro de texto líquido/elástico al lado de un botón?

Question

Quiero posicionar un cuadro de texto y un botón junto a la otra en una manera 'elástica' o 'líquido' (lo que es el término correcto?), Así:

layout http://www.ocactus.org/liquid.gif

cuando se coloca en un recipiente de ancho arbitrario (incluido el cambio de tamaño de la ventana del navegador), el botón debe alinearse a la derecha y ocupar todo el ancho que requiera, mientras que el cuadro de texto debe usar el ancho restante. Desafortunadamente, el ancho del botón no se puede arreglar en CSS, ya que depende de los subtítulos (diferentes acciones, idiomas, etc.).

¿Cuál es una buena solución para lo anterior que funciona con el navegador cruzado?

Answer 1

pude conseguir que esto funcione dentro de una tabla (Lo sé, pero funciona) cuando pueda manejar correctamente la página de cambio de tamaño, así como el valor del cambio botón:

<table class="elastic"> 
    <tr> 
     <td><input class="textbox" type="text"></td> 
     <td class="button"><input type="button" value="Test Button"></td> 
    </tr> 
</table> 

Puede haber una alternativa <div> por ahí para el estilo.

EDIT: que renovó mi ejemplo de usar la siguiente hoja de estilo:

.elastic { width:100%; } 
.elastic .textbox { width: 100%; } 
.elastic .button { width: 1%; } 

Answer 2

Es difícil dar una respuesta definitiva sin ver algo de código, pero el siguiente tamaño voluntad la entrada 50% del ancho del navegador con el botón al lado.

input {width:50%} 

<input> 
<button>save</button> 

Answer 3

HTML:

<div class="widebox"> 
    <input type="text" value="" /> 
    <button>Button</button> 
</div> 

jQuery:

<script type="text/javascript"> 
$(document).ready(function(){ 
    var w = $(".widebox"); 
    $(".widebox input:text").css({ width: (w.width - (w.children("button:first").width + 20)) }); 
}); 
</script> 

Nota: Asegúrese de incluir la librería jQuery en <cabeza> del documento. Para la velocidad, recomiendo usar la que aloja Google: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Answer 4

Aquí hay una extensión jQuery que escribí en base a la respuesta de NGJ Graphics. Tiene en cuenta varios botones, como las opciones Aceptar/Cancelar.

(function($) { 
    $.fn.extend({ 
    widebox: function() { 
     var el = $(this); 
     var width = 0; 
     el.children("button").each(function() { 
     width += $(this).outerWidth(true); 
     }); 
     el.children("input:text").css({ width: (el.width() - (width + 40)) }); 
    } 
    }); 
})(jQuery);