width: auto для полей <input>

123

Вопрос для новичков в CSS. Я подумал, width:autoчто display:blockэлемент означает «заполнить доступное пространство». Однако для <input>элемента это не так. Например:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Тогда два вопроса:

Есть ли точное определение ширины: авто? Спецификация CSS кажется мне расплывчатой, но, возможно, я пропустил соответствующий раздел.
Есть ли способ добиться моего ожидаемого поведения для поля ввода - т.е. заполнить доступное пространство, как это делают другие элементы уровня блока?

Спасибо!

css

— richb
источник

возможный дубликат ввода с отображением: блок не является блоком, почему бы и нет?

— Phrogz 07

@Phrogz Да, это дубликат. Я искал, но не нашел. Спасибо.

— richb 07

88

An <input>ширина «S генерируется из его sizeатрибута. По умолчанию sizeэто то, что определяет автоматическую ширину.

Вы можете попробовать, width:100%как показано в моем примере ниже.

Не заполняет ширину:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Ширина заливки:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Меньший размер, меньшая ширина:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

ОБНОВИТЬ

Вот лучшее, что я мог сделать через несколько минут. Он меньше 1 пикселя в FF, Chrome и Safari и идеально подходит для IE. (Проблема в том, что # ^ & * IE применяет границы иначе, чем все остальные, поэтому это непоследовательно.)

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

— Бен
источник

24

Спасибо. width: 100% - это не одно и то же. Он переполнит родительский блок, если есть поля или граница.

— richb 07

1

Вы можете явно настроить их так, как хотите, например border:2px inset #eee; margin:-2px. Я сам не тестировал, но что-то в этом роде.

— Бен

3

Спасибо, Стив. Вы также должны проверить stackoverflow.com/questions/1030793/…, где есть еще несколько интересных идей.

— richb

1

Эпическое решение для согласованной ширины с помощью CSS в полях ввода, +1

— Стивен Спринкл

11

вы можете использовать для свойства input box-sizing значение border-box, чтобы граница не перекрывала контейнер.

— Николай

26

«Есть ли определение, что именно означает width: auto? Спецификация CSS кажется мне расплывчатой, но, возможно, я пропустил соответствующий раздел».

Никто на самом деле не ответил на вышеуказанную часть вопроса оригинального плаката.

Вот ответ: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Пока значение width равно auto, элемент может иметь горизонтальные поля, отступы и границу, не становясь шире своего контейнера ...

С другой стороны, если вы укажете width: 100%, общая ширина элемента будет составлять 100% от его содержащего блока плюс любые горизонтальные поля, отступы и границы ... Это может быть то, что вы хотите, но, скорее всего, это не так. ,

Чтобы визуализировать разницу, я привел пример: http://www.456bereastreet.com/lab/width-auto/

— ответ
источник

4

хороший ответ / ссылка, предлагаю поставить третий пример с «box-sizeing: border-box» ...

— полубит

это не для ввода, и, поскольку по умолчанию используется auto, я не понимаю, насколько это полезно

— Barbz_YHOOL

9

Как указано в другом ответе, width: auto не работает из-за того, что ширина создается атрибутом размера ввода, который не может быть установлен на «auto» или что-то подобное.

Есть несколько обходных путей, которые вы можете использовать, чтобы заставить его хорошо работать с блочной моделью, но, насколько мне известно, ничего фантастического.

Сначала вы можете установить заполнение поля в процентах, убедившись, что ширина в сумме составляет 100%, например:

input {
  width: 98%;
  padding: 1%;
}

Еще вы можете попробовать использовать абсолютное позиционирование, при этом left и right установлены в 0. Используя эту разметку:

<fieldset>
    <input type="text" />
</fieldset>

И этот CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

Это абсолютное позиционирование приведет к тому, что ввод будет заполнять родительский набор полей по горизонтали, независимо от заполнения или поля ввода. Однако огромным недостатком этого является то, что теперь вам нужно иметь дело с высотой набора полей, которая будет равна 0, если вы ее не установите. Если все ваши входы имеют одинаковую высоту, это сработает для вас, просто установите высоту набора полей на любую высоту ввода.

Помимо этого, есть несколько JS-решений, но мне не нравится применять базовые стили с JS.

— Джон Рааш
источник

8

Поскольку input«s widthуправляется это sizeатрибут, это, как я инициализироватьinput width в соответствии с его содержанием:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— Фабрисио
источник

1

Хотя этот #angularконкретный ответ не является правильным ответом на вопрос OP (и я не поддерживаю), я пришел в эту тему, чтобы найти эту конкретную идею.

— nobug 05

5

Возможно, это не совсем то, что вам нужно, но мой обходной путь - применить стиль автоматической ширины к div-оболочке, а затем установить для ввода значение 100%.

— mwilcox
источник

0

Единственный вариант, который я могу придумать, - это использовать width:100%. Если вы хотите, чтобы поле ввода было заполнено, а не просто поместите labelвокруг него контейнер , вместо этого переместите форматирование на эту метку, а также укажите заполнение метки. Поля ввода жесткие.

— Лайош Месарош
источник

0

Ответ 1 - "response" дал хороший ответ / ссылку. Короче говоря, по умолчанию используется "auto", поэтому это похоже на удаление любых изменений ширины элемента.

Ответ 2 - используйте width: 100%вместо. Он заполнит 100% родительского контейнера, в данном случае «форму».

— Ахил Гупта
источник

-4

Совершенно потрясающие ссылки, описывающие абсолютно потрясающую функцию:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

Суть:

Поместите элементы в контейнер с display: flex;.
Установите flex-grow: 1;для каждого из содержащихся элементов.
Если у вас есть элементы внутри этих содержащихся элементов, которые также должны расти, повторите шаги 1 и 2 для содержащихся элементов и их (содержащихся-содержащих) дочерних элементов.
Адаптируйте и корректируйте в соответствии с различными потребностями (см. Ссылки).

Изменить - пример :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— Андрей
источник

Как это помогает с автоматической шириной полей ввода?

— ядро

@kernel Simple. См. Пример.

— Эндрю

Ширина ввода всегда 100%, а не минимально возможная.

— ядро

2

Вход по-прежнему не такой же ширины, как его содержимое, о чем был вопрос.

— ядро

Если вы читаете принятый - а также все остальные - ответ, он делает что-то другое. Тогда возникает вопрос: «Что вы делаете правильно, а все делают неправильно?».

— ядро