Почему ширина ввода 100% всегда выходит за пределы содержащего div?

Question

обратите внимание на скрипку: http://jsfiddle.net/cBWaG/4/

У меня есть контейнер с подкладкой.То, что я хочу, это ввод (текст), чтобы быть 100% ширины внутри отступа.В настоящее время, хотя это выходит за рамки дополнения.Предложения по предотвращению превышения входным значением контейнера / отступа без использования фиксированной ширины?

Спасибо

Answer 1

Форма ввода действительно трудно стилизовать.И особенно трудно заставить стиль выглядеть одинаково во всех браузерах.Один из лучших способов стилизовать ввод текста - избавиться от границ, контуров, отступов и полей.Затем оберните ввод в div с нужной вам рамкой, контуром, отступом и полем.

Я думаю, что достиг того, что вы хотите.Проверьте это раздвоенное jsFiddle: http://jsfiddle.net/aP2Ju/

Answer 2

попробуйте

input[type="text"] {
     width: 100%; 
     box-sizing: border-box;
     -webkit-box-sizing:border-box;
     -moz-box-sizing: border-box;
}

Демо

Answer 3

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

В более старых версиях IE (v4 и 5) использовалась нестандартная блочная модель, которая теперь называется «Режимом причуд».Эта блочная модель помещает отступы и границы внутри измеряемой области, так что свойство width блока включает их.В этой модели проще иметь коробку шириной 100%.

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

В последнее время было добавлено свойство CSS, которое позволяет дизайнерам выбирать, какую из этих блочных моделей они хотят использовать длялюбые элементы на их странице.Свойство называется box-sizing и поддерживается большинством браузеров, используемых в настоящее время;единственными основными, которые не поддерживают его, являются IE6 и IE7 (другие требуют префикса поставщика, но поддерживают его).Смотрите здесь таблицу поддержки браузером этой функции: http://caniuse.com/#search=box-sizing

Другой вариант - просто вообще не устанавливать ширину.Элемент <div> по умолчанию настроен на заполнение доступной ширины, что, в основном, означает 100%, но таким образом, что это работает, независимо от того, какие поля и отступы заданы, что, в основном, и нужно.Если вы переопределили ширину и хотите установить ее обратно на этот параметр, используйте width:auto;.

Надеюсь, это поможет.

Answer 4

Создайте новый div внутри контейнера div без заданной ширины и отступов.Он будет автоматически занимать всю ширину внутри отступа.Затем вы можете задать ширину ввода 100%, чтобы он полностью заполнял внутренний блок.

Answer 5

Да, трудно обрабатывать размер входного элемента.Размер коробки не имеет большого значения, он все еще выходит за границы.Договорились, что использование div - это хороший подход.Вот то, что я тестировал в IE 11 (11.0.18).

Давайте теперь использовать div.Ключевым моментом является установка поля и отступов для элементов ввода на 0 пикселей и ширину: 100%.Это заставляет входные элементы заполнять родительский контейнер элементом «div».

    <fieldset id="inputs">
        <div id="username_div">
            <input id="username" type="text" placeholder="username" required autofocus />
        </div>
        <div id="password_div">
            <input id="password" type="password" placeholder="password" />
        </div>
    </fieldset>


    #inputs div {
        border: 1px solid red;
        margin: 5px 10px 5px 10px;
        padding: 10px 10px 10px 30px;
        border: 1px solid #CCC;
        border-radius: 5px;
    }

    #inputs input {
        margin:0px;
        padding:0px;
        width:100%;
    }

Answer 6

width: 100%;

Является ли общая доступная ширина элементов, включая отступы, как определено его родителем.

width: auto;

Расширит ваш элемент, чтобы заполнить оставшееся пространство.

Answer 7

Просто примечание: причиной этого является характер модели коробки. Ширина вашего <input> на самом деле составляет 100% + отступ.