Входной элемент с подкладкой и процентной ширины превышает родительского DIV

Question

у меня есть это:

<div class="wrapper"> 
    <input type="text"/> 
</div> 

div{ 
    border: 1px solid red; 
    width: 300px; 
} 

input{ 
    width: 100%; 
    padding: 10px; 
} 

мне нужен входной сигнал, чтобы быть на 100% от родительского DIV, но и мне нужен этот вход, чтобы иметь 10px отступы. Результаты можно увидеть здесь: http://jsfiddle.net/pdJYF/

Как я могу это достичь?

Answer 1

Добавить box-sizing к вашему полю ввода:

input{ 
     -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
    width: 100%; 
    padding: 10px; 
} 

• Example Fiddle
• Browser Compatibility

---

Базовым "проблема" является окно модель HTML/CSS. Как вы можете видеть в поле illustration of the respective MDN article, каждый элемент имеет четыре области: поле поля, рамка, поле для заполнения и поле для содержимого.

Когда вы назначаете меры (width или height) элементу, это применяется к одной из этих областей. Если область является, например, поле содержимого, то для общего размера поля элемента добавляются граница и дополнение. Таким образом, вы не будете устанавливать общие размеры окна, но один из его содержащихся ящиков.

Свойство CSS box-sizing сообщает браузеру, какое поле использовать при вычислении размеров элемента. Значение по умолчанию: content-box. Таким образом, в приведенном выше примере значения для поля, границы и заполнения добавляются и, следовательно, элемент слишком велик. Установив модель окна на border-box, только размеры добавляются к размерам (которые здесь равны нулю), и элементы подходят.

Answer 2

Вы должны уменьшить 2x padding слева и справа и уменьшить 2x для любого пикселя, который хотите использовать, как это, и вставить ширину вашего ввода.

Например: 20px (отступы влево & вправо) + 2px (границы влево & вправо) = 22px

300px - 22px = 278px

ДИВ {граница: 1px сплошной красный; ширина: 300px; }

ввод {ширина: 278px; обивка: 10px; }

Answer 3

Почему вы не поставить отступы в процентах тоже:

input{ 
    width: 94%; 
    padding: 0 3%; 
    border:0; 
}