Как расположить жидкостное / эластичное текстовое поле рядом с кнопкой?

Question

Я хочу расположить текстовое поле и кнопку рядом друг с другом «эластичным» или «жидким» способом (каков правильный термин?), Например так:

_{(источник: ocactus.org )}

При помещении в контейнер произвольной ширины (включая изменение размера окна браузера) кнопка должна выравниваться вправо и занимать столько ширины, сколько требуется, в то время как текстовое поле должно использовать оставшуюся ширину. К сожалению, ширина кнопки не может быть зафиксирована в CSS, так как она зависит от заголовка (различные действия, языки и т. Д.).

Какое хорошее решение для вышеупомянутого, который работает кросс-браузер?

Answer 1

Мне удалось заставить это работать в пределах таблицы (я знаю, но это работает), где это правильно обработало бы изменение размера страницы так же как значение изменения кнопки:

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

Может быть

альтернатива для стиля.

РЕДАКТИРОВАТЬ: Я обновил мой пример для использования следующей таблицы стилей:

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

Answer 2

Вот расширение jQuery, которое я написал на основе ответа NGJ Graphics. Он принимает во внимание несколько кнопок, таких как параметры Ok / Cancel.

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

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

Трудно дать однозначный ответ, не увидев некоторый код, но следующее изменит размер ввода на 50% ширины браузера с помощью кнопки рядом с ним.

input {width:50%}

<input>
<button>save</button>