Как сделать так, чтобы ввод текста с отступом заполнял его контейнер

Question

Конечно, width: 100% в элементе блока заполняет контейнер, но только если border, padding и margin равны нулю. Помещение такого input в содержащий div с отступом делает свое дело, но мне интересно, почему просто input {display: block; width: auto;} не работает Предложения?

Answer 1

Я согласен с centr0 относительно того, почему width: auto не работает.

Если вы действительно хотите получить input в качестве полной ширины своего контейнера, тогда работает следующее.Дано:

<div id="Container">
    <form>
        <input type="text" />
    </form>
</div>

Сделайте это с помощью css:

form {
    padding: 0 0 0 14px; 
    }

input {
    padding: 5px;
    width: 100%;
    margin: 0 0 0 -14px;
}

Объяснение: Очевидно, поле -14px в input противодействует добавлению, добавленному кэлемент form.Что не так очевидно, так это откуда взялся 14px.Он равен левому / правому 5-пиксельному отступу input плюс значение по умолчанию для ширины границы элемента input (2 пикселя во всех браузерах, которые я тестировал).Таким образом, 2 + 5 + 5 + 2 = 14.

Чтобы быть уверенным в том, что вы используете кросс-браузер, вам нужно явно установить ширину границы, равную желаемой для input.Если вы хотите другой отступ (или более толстые / более тонкие границы), просто переделайте математику.Заполнение 3px будет 10px вместо 14px, заполнение 7px будет 18px вместо 14px.

Например, вы можете установить ширину #Container (также может быть сама body, то естьпросто по умолчанию 100% ширины страницы) к тому, что вы хотите, и вышеупомянутый CSS должен соответствовать его ширине.

Answer 2

, если я правильно помню, размер ввода по умолчанию не охватывает ширину контейнера. "ширина: авто;" это как "сбросить" стиль обратно к его значению по умолчанию.

Answer 3

Сброс заполнения контейнера решает проблему.

td {
  padding: 0 1em;
}

Answer 4

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

также, width:auto даст браузеру значение по умолчанию. Попробуйте width:100%