Как ввести текстовый ввод с заполнением его контейнера

Question

Конечно, width: 100% на блочном элементе заполняет контейнер, но только если граница, отступы и маржа равны нулю. Помещение такого 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. Он равен левому/правому 5px отступу input плюс значение по умолчанию для ширины границы элемента (0x) (2px во всех проверенных вами браузерах). Итак, 2 + 5 + 5 + 2 = 14.

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

td { 
    padding: 0 1em; 
}