बटन के बगल में एक तरल/लोचदार टेक्स्टबॉक्स कैसे रखें?

Question

मैं एक 'लोचदार' या 'तरल' रास्ते में इतनी तरह एक पाठ बॉक्स और एक बटन एक दूसरे के बगल स्थित करने के लिए (सही शब्द क्या?) हैं:

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

जब की एक कंटेनर में रखा मनमाने ढंग से चौड़ाई (सहित ब्राउज़र विंडो आकार बदलना), बटन को सही संरेखित करना चाहिए और जितनी चौड़ाई उतनी चौड़ाई लेनी चाहिए जब टेक्स्टबॉक्स को शेष चौड़ाई का उपयोग करना चाहिए। दुर्भाग्य से बटन की चौड़ाई सीएसएस में तय नहीं की जा सकती क्योंकि यह कैप्शन (विभिन्न क्रियाएं, भाषा इत्यादि) पर निर्भर करती है।

उपरोक्त के लिए एक अच्छा समाधान क्या है जो क्रॉस ब्राउज़र का काम करता है?

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

हो सकता है:

Answer 1

मैं इस एक मेज (मुझे पता है, लेकिन यह काम करता है) जहां इसे सही ढंग से पेज का आकार बदलने संभाल होगा और साथ ही बटन बदलते का मूल्य के भीतर काम करने के लिए कर रहा था एक <div> स्टाइल के लिए बाहर विकल्प।

संपादित करें: मैं अपने उदाहरण पुर्नोत्थान निम्नलिखित शैली पत्रक का उपयोग करें:

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

Answer 2

यह कुछ कोड देखे बिना एक निश्चित जवाब देने के लिए मुश्किल है, लेकिन निम्नलिखित इच्छा आकार ब्राउज़र चौड़ाई के इनपुट 50% इसके बगल में बटन के साथ।

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> 

नोट: आपके दस्तावेज़ के < सिर > में jQuery पुस्तकालय शामिल करना न भूलें। गति के लिए मैं Google द्वारा होस्ट किए गए एक का उपयोग करने की अनुशंसा करता हूं: http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Answer 4

यहां एक jQuery एक्सटेंशन है जिसे मैंने एनजीजे ग्राफिक्स के उत्तर के आधार पर लिखा था। यह कई बटन जैसे ओके/रद्द विकल्प को ध्यान में रखता है।

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