HTML, CSS: Входная коробка выходит за пределы видимой области

У меня есть div div и box. Когда я изменяю размер окна, divs соответствующим образом адаптируются, но входные данные обрезаются. Как изменить размер ввода на размер экрана при максимальной ширине 400 пикселей? Вот скриншоты двух состояний: Looks good. Но когда страница сужается, ответчики отвечают, но the input gets cut but the divs are good.HTML, CSS: Входная коробка выходит за пределы видимой области

Вот как я мой стиль ввода

.text-input { 
    display: block; 
    width: 100%; 
    font-family: sans-serif; 
    font-size: 1em; 
    appearance: none; 
    border-radius: none; 
    padding: 0.5em; 
    border: solid 1px #fff; 
    box-shadow: inset 1px 1px 2px 1px #707070; 
    transition: box-shadow 0.3s; 
    max-width: 400px; 
    display: inline-block; 
} 
.text-input:focus, 
.text-input.focus { 
    outline: none; 
    box-shadow: inset 1px 1px 2px 1px #c9c9c9; 
}

Мой вопрос, как я должен стиль ввода, чтобы заставить его вести себя так же, как дивы? Также, какова интуиция за решением?

источник

2014-10-04 David Williams

[jsFiddle] (http://www.jsfiddle.net), может быть, ? –

Как насчет ввода 'input' с' width' '100%' внутри div? –

Я думаю, что ваши 'width' и' max-width' проблематичны для совместного использования. –

Вы можете установить input внутри div, указать input a width:100%;.

HTML

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

CSS

input[type=text] { 
    width: 100%; 
    max-width: 400px; 
    box-sizing: border-box; 
} 
div { 
    border: solid 1px red 
}

DEMO

источник

2014-10-04 14:55:35

Похоже, что он отображается за пределами содержимого div при изменении размера. Как мы это остановим? –

@DavidWilliams с 'box-sizing', проверьте обновленный ответ. –

Спасибо, отлично работает. –

Просто удалить максимальную ширину из вашего кода. Замените его на 100%. Если вы хотите быть более веб-отзывчивый, вы можете определить больше deffinitions, каждый для разного размера окна, например, так:

@media screen and (max-width:720px) { width: 90%; } 
@media screen and (min-width:720px) { width: 100%; }

Google отзывчивый веб-дизайн и ширина экрана примеры :)

источник

2014-10-04 14:56:29 Beri

Я сделал это, но теперь окно ввода не заканчивается в правой части окна http: // imgur. com/QBR13z5. Идеи? –

вот скрипку

проблема была width была 100% и padding был xx px так приходит 100% + xxpx то причина была превышает 100%

Js Fiddle

box-sizing:border-box;

это свойство дает отступы, границы внутри которого не позволяет ширина должна превышать 100% от

источник

2014-10-04 15:00:07

Это тоже правильно, и очень хороший способ сказать это, спасибо, что дает мне больше интуиции. –

HTML, CSS: Входная коробка выходит за пределы видимой области

ответ

Смежные вопросы