Jak umieścić pole tekstowe płynne/sprężyste obok przycisku?

Question

Chcę ustawić pole tekstowe i przycisk obok siebie w „elastycznej” lub „płynnej” sposób (co jest prawidłowe określenie?) Tak:

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

Po umieszczeniu w pojemniku dowolna szerokość (w tym zmiana rozmiaru okna przeglądarki), przycisk powinien być wyrównany do prawej strony i zajmować tyle szerokości, ile wymaga, a pole tekstowe powinno wykorzystywać pozostałą szerokość. Niestety szerokość przycisku nie może być ustalona w CSS, ponieważ zależy to od napisu (różne akcje, języki itp.).

Jakie jest dobre rozwiązanie dla powyższego, które działa w przeglądarce?

Answer 1

udało mi się uzyskać to do pracy w tabeli (wiem, ale działa), gdzie byłoby poprawnie obsługiwać stronę zmianę rozmiaru, jak również wartość przycisku zmienia:

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

Może być <div> alternatywę tam do stylizacji.

EDIT: I przebudowana moim przykładem, aby użyć następujących arkusza stylów:

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

Answer 2

Trudno dać ostateczną odpowiedź, nie widząc jakiś kod, ale następujący rozmiar będzie wejście 50% szerokości przeglądarki za pomocą przycisku obok niego.

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> 

Uwaga: Pamiętaj, aby dołączyć bibliotekę jQuery w dokumencie za < głowy >. Dla szybkości polecam używanie hostowanego przez Google: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Answer 4

Oto rozszerzenie jQuery, które napisałem na podstawie odpowiedzi NGJ Graphics. Uwzględnia wiele przycisków, takich jak Opcje Ok/Anuluj.

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