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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

попробуйте это

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

Демо

Ответ 4

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

Ответ 5

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

Ответ 6

width: 100%;

Доступна ли ширина ширины элементов TOTAL, включая прописку, как определено ее родителем.

width: auto;

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

Ответ 7

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

Давайте теперь используем div. Ключ состоит в том, что для поля и заполнения входных элементов задано значение 0px и ширина: 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%;
    }