CSS сделать текстовое поле заполнить всю доступную ширину - PullRequest
Новая
       7

CSS сделать текстовое поле заполнить всю доступную ширину

15 голосов
/ 07 июля 2010

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

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

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

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

Хакерские решения хороши, если это необходимо, я давно отказался от всякого притязания даже на заботу о стандартах CSS, когда так сложно сделать простейшую вещь.1009 * Редактировать : чтобы уточнить, под TextBox я имею в виду <input type="text"/>

Ответы [ 7 ]

28 голосов
/ 20 декабря 2012

ОБНОВЛЕННЫЙ ОТВЕТ В 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>

Надеюсь, это кому-нибудь поможет!

СТАРЫЙ ОТВЕТ НИЖЕ

Я знаю, что это старый вопрос, но правильного решения здесь нет, так что на случай, если кто-то другой найдет способ здесь:

Решение состоит в том, чтобы обернуть текстовое поле в промежуток.

HTML: 

<label>Input</label>
<span>
    <input/>
</span>

CSS: 

label {
    float: left;
}

input {
    width: 100%;
    box-sizing:border-box;
}

span {
    display: block;
    overflow: hidden;
}

См. эту скрипку для примера (теперь немного устарел, поскольку я удалил заполнение в пользу использования рамки на входе).

6 голосов
/ 04 июня 2015

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

.flexContainer {
    display: flex;
    width:100%;
}
input {
    width: 100%;
}
<div class="flexContainer">
<span>text:&nbsp;</span> <input/> &nbsp; <label>text</label>
</div>
3 голосов
/ 07 июля 2010

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

<div style="width:100%; white-space:nowrap">
"Some Text" <DropDown> "Some more text" <TextBox style="width:100%"> <Button> <Button>
</div>
1 голос
/ 07 июля 2010

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

0 голосов
/ 19 апреля 2016

Это невозможно в CSS для Chrome.Возможный способ - манипулировать атрибутом size элемента управления формы через 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>

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

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 ); ?>" />
0 голосов
/ 07 июля 2010

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

0 голосов
/ 07 июля 2010

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

...