Как предотвратить заполнение дочернего элемента дочерним элементом?

Question

Как видно из this example, input кажется «переполнен» своим родителем div. Я хотел бы добавить дополнение к input, не переполнив его родительский элемент.

Я хотел бы узнать лучшее решение/обходное решение для каждого браузера (включая IE, Firefox, Chrome и т. Д.).

Answer 1

Вы можете увидеть this answer, но если вы не» т, как это, вы можете использовать box-sizing CSS3 свойство как это:

input { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Live jsFiddle example

Answer 2

Не указывайте ширину внутреннего div как 100%. Div автоматически будет соответствовать ширине его родительского контейнера. Demo

Answer 3

Похоже, что вход находится внутри div, но расположен в верхнем левом углу. Поскольку вход занимает 100% от ширины div, он закрывает красный фон div. Div больше, поэтому он торчит дно, и похоже, что вход находится сверху. Выполните следующие действия:

• Нанести отступы в CSS из внешних DIV не поле ввода.
  Вы можете применить маржу к вводу, если хотите, но я думаю, что дополнение содержащее div лучше.
  • сделать поле ввода менее широким, чем DIV (< 100%)

Answer 4

Перетяжка добавляет к ширине объекта. Один из вариантов - удалить левую/правую прокладку из ввода и просто использовать текстовый отступ, хотя это удаляет правильное заполнение.

.inside{ 
    background: blue; 
    border: none; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    text-indent: 10px; 
    width: 100%; 
} 

В качестве альтернативы, вместо использования жестко закодированных пиксельных-ширин для заполнения, вы можете использовать проценты, и вычесть это значение из ширины:

.inside{ 
    padding: 3%; 
    width: 94%; 
}