Cómo colocar un cuadro de texto líquido / elástica junto a un botón?

Question

Quiero colocar un cuadro de texto y un botón al lado del otro de una manera 'elástica' o 'líquido' (¿cuál es el término correcto?), Así:

_{(fuente: ocactus.org )}

Cuando se coloca en un recipiente de anchura arbitraria (incl. Ventana del navegador cambio de tamaño), el botón debe alinear y tomar hasta como mucho ancho ya que requiere mientras que el cuadro de texto debe utilizar el ancho restante derecha. Por desgracia, el ancho del botón no se puede fijar en CSS, ya que depende del epígrafe (diferentes acciones, idiomas, etc.).

¿Qué es una buena solución para lo anterior que funciona con navegadores?

Answer 1

Yo era capaz de 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 un

alternativa que hay para el peinado.

EDIT: I renovó mi ejemplo para 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 situado junto a él.

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 el del documento. Para la velocidad recomiendo el uso de la ofrecida por Google: http : //ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Answer 4

Esto es una extensión de jQuery que escribió basándose en la respuesta NGJ Graphics. Se tiene en cuenta varios botones tales como OK Cancel / Opciones.

(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);