CSS делает текстовое поле заполнением всей доступной ширины

У меня есть следующая "строка" на моей веб-странице.

<div style="width:100%">
"Some Text" <DropDown> "Some more text" <TextBox> <Button> <Button>
</div>

Элемент управления DropDown. На самом деле у меня нет контроля над шириной, так как он подходит для любого длинного значения параметра. Кнопки фиксированной ширины. Как я могу заставить TextBox заполнить всю оставшуюся ширину?

Я попытался поместить его в таблицу, но столкнулся с той же проблемой, то есть как мне сделать все остальные столбцы как можно меньше, чтобы соответствовать их содержимому, а затем заполнить оставшуюся ширину столбца TextBox?

Решения Hacky в порядке, если это необходимо, я давно отказался от любых претензий даже заботиться о стандартах CSS, когда так сложно сделать простейшую вещь.

Изменить: уточнить, с помощью TextBox я имею в виду <input type="text"/>

Ответы

Ответ 1

ОБНОВЛЕННЫЙ ОТВЕТ В 2018 ГОДУ

Только что натолкнулся на этот старый вопрос, и теперь есть гораздо более простой и понятный способ добиться этого с помощью CSS Flexible Box Layout Model, которая теперь поддерживается всеми основными браузерами.

.flex-container {
  display: flex;
}

.fill-width {
  flex: 1;
}
<div class="flex-container">
	<label>Name:</label><input class="fill-width" type="text" /><span>more text</span>
</div>

Ответ 2

Вот что сработало для меня. Обратите внимание, что в некоторых случаях мне приходилось использовать &nbsp; между элементами, иначе он попадал в следующую строку.

.flexContainer {
    display: flex;
    width:100%;
}
input {
    width: 100%;
}
<div class="flexContainer">
<span>text:&nbsp;</span> <input/> &nbsp; <label>text</label>
</div>

Ответ 3

Я бы предложил следующее:

<div style="width:100%; white-space:nowrap">
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button>
</div>

Ответ 4

Вы можете установить ширину текстового поля на 100% (с помощью css, как это было в случае с div), поэтому он будет охватываться в полной мере его родителем (при условии, что родительский тег расширяет весь экран).

Ответ 5

Единственный способ, с помощью которого я вижу это, - это использовать Javascript, поэтому вы получаете ширину div (в пикселях), вычитаете текущий размер других элементов управления и добавляете результат так же, как и вход. Это потребует, чтобы вы поместили текст внутри элемента управления span (чтобы вы могли получить его размер).

Ответ 6

Задайте ширину textbox до 100% с помощью свойства css display: inline;?

Ответ 7

Это не выполнимо в CSS в том, что касается Chrome. Возможным способом является манипулирование атрибутом размера элемента управления формы через JavaScript. Если длина строки равна 25, добавьте дополнительно не менее 10 для зазора.

HTML

<!-- "The quick brown fox jumps over the lazy dog" is 43 characters long -->
<input type="text" value="The quick brown fox jumps over the lazy dog" id="textbox1" />

JavaScript/jQuery

<script>
    var value = jQuery('#textbox1').val();                  // 43
    jQuery('#textbox1').attr('size', value.length + 10 );   // resizes the textbox
</script>

Другой вариант также заключается в предварительном вычислении размера из внешнего script.

PHP/HTML

<?php
$value = "The quick brown fox jumps over the lazy dog";
?>
<input type="text" value="<?php echo $value; ?>" size="<?php echo ( strlen($value) + 10 ); ?>" />