ширина: авто для полів <input>

122

Питання для початківців 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>

Тоді два питання:

Чи є визначення точно, яка ширина: auto означає? Специфікація CSS здається мені невиразною, але, можливо, я пропустив відповідний розділ.
Чи є спосіб досягти моєї очікуваної поведінки для поля введення - тобто. заповнити доступний простір, як це роблять інші елементи рівня блоку?

Дякую!

css

— Richb
джерело

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

— Фрогз

@Phrogz Так, це дублікат. Я шукав, але не знайшов. Дякую.

— richb

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

Дякую. ширина: 100% - це не те саме. Він буде переповнений батьківським вікном, якщо є поля або межа.

— richb

1

Ви можете їх явно встановити, щоб налаштувати, як потрібно, наприклад border:2px inset #eee; margin:-2px. Я ще не перевіряв його сам, але щось у цьому напрямку.

— Бен

3

Спасибі Стів. Ви також можете перевірити stackoverflow.com/questions/1030793/…, який має ще деякі цікаві ідеї.

— richb

1

Епічне рішення на постійну ширину через css на полях введення, +1

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

11

ви можете використовувати встановити властивість розміру коробки для входів на межу-поле, щоб запобігти перекриття контейнера кордоном.

— ніколас

26

"Чи є визначення точно такої ширини: auto означає? Автомобіль CSS здається мені невиразним, але, можливо, я пропустив відповідний розділ."

Ніхто насправді не відповідав на вищезгадану частину питання оригінального плаката.

Ось відповідь: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Поки значення ширини є автоматичним, елемент може мати горизонтальний запас, підкладку та облямівку, не стаючи ширшим від свого контейнера ...

З іншого боку, якщо вказати ширину: 100%, загальна ширина елемента буде 100% його блоку, що містить блок, плюс будь-який горизонтальний запас, накладка та рамка ... Це може бути те, що ви хочете, але, швидше за все, це не так .

Для візуалізації різниці я зробив приклад: http://www.456bereastreet.com/lab/width-auto/

— відповідь
джерело

4

приємна відповідь / посилання, пропоную навести третій приклад з "box-sizeing: border-box" ...

— напівбіт

це не для введення даних, і оскільки автоматичне значення за замовчуванням, я не бачу, наскільки це корисно

— Barbz_YHOOL

9

Як зазначено в іншій відповіді, width: auto не працює через ширину, що генерується атрибутом size input, який не може бути встановлений на "auto" або щось подібне.

Є кілька обхідних шляхів, які ви можете використати, щоб змусити її добре грати з коробковою моделлю, але, наскільки я знаю, нічого фантастичного.

Спочатку ви можете встановити прокладку в полі за допомогою відсотків, переконайтесь, що ширина додає до 100%, наприклад:

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

Інша річ, яку ви можете спробувати, - це використання абсолютного позиціонування з лівим і правим значенням 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конкретна відповідь не є коректною відповіддю на питання ОП (і я не закликаю), я прийшов до цієї теми лише для того, щоб знайти цю конкретну ідею.

— нобуг

5

Це може бути не саме те, що ви хочете, але моє вирішення полягає в застосуванні стилю автошироти до обгорткового діва - тоді встановіть свій внесок на 100%.

— mwilcox
джерело

0

Єдиний варіант, який я можу придумати, - це використовувати width:100%. Якщо ви також хочете, щоб на полі введення було також прокладки, а не просто розміщувати контейнер labelнавколо нього, перемістіть форматування замість цієї мітки, а також вкажіть прокладку на мітку. Поля введення жорсткі.

— Лайош Мецарос
джерело

0

Відповідь 1 - "відповідь" дала приємну відповідь / посилання на неї. Якщо коротко сказати, за замовчуванням "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 Простий. Див. Приклад.

— Андрій

Ширина вводу завжди 100% і не мінімально можлива.

— ядро

2

Вхід все ще не той самий ширини, як його зміст, про що було питання.

— ядро

Якщо ви читаєте прийняте - а також відповіді всіх інших - це відповідає щось інше. Питання було б тоді: "що ти робиш правильно, що всі роблять неправильно?".

— ядро