Я искал, но не могу найти решение для моей собственной проблемы.
Я работаю над мобильным сайтом и нуждаюсь в том, чтобы поля ввода отображались на 100% ширины экрана. Но у меня есть padding-left: 16px и margin: 5px, что заставляет ящики выйти за пределы экрана, поэтому мне нужно прокрутить вправо, чтобы увидеть конец окна. Как сделать коробки на 100% минус заполнение и маржа?
Попробуйте: http://jsfiddle.net/wuSDh/
Вы можете использовать calc, современные браузеры поддерживают его и IE9 +.
div {
position: absolute;
height: 20px;
width: calc(50% - 10px);
padding: 5px;
}
Looe width:100%;, затем просто используйте столько отступов, сколько хотите:
#login_box {
padding:10px;
margin:50px;
}
Demo http://jsfiddle.net/PFm3h/
Изолированный эффект:
Демо http://jsbin.com/ozazat/1/edit
Много дополнений, много полей, никаких проблем.
Элементы уровня блока естественным образом заполняют их родительские элементы, однако, если вы специально задаете ширину, вы переопределяете это поведение, позволяя добавлять границу и границу к указанной ширине. Вы указываете ширину 100% на теле, что дает возможность для нее переполнять документ по горизонтали, если есть элемент, предоставленный ему правой внутренней кромкой.
Пример: http://jsfiddle.net/trex005/6earf674/
Простым средством для этого является прекращение объявления ширины тела. Если по какой-либо причине это требуется, вы можете установить маржу в 0; Тот же принцип применяется к вводу, но он немного сложнее. Входы (текст/пароль) и текстовые поля, даже если они установлены для отображения в виде блока, получат их ширину от размера и столбцов соответственно. Это можно переопределить, указав ширину в CSS, однако у них также есть пользовательский агент, заданный границами и полями, чтобы у вас снова возникла проблема переполнения. Чтобы исправить это переполнение, вам нужно установить входной дисплей для блокировки и его размер окна: border-box. Пограничный блок будет вычислять границы и отступы как часть ширины.
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Как только вы это сделаете, вы заметите, что между элементами есть дополнительное расстояние. Это связано с тем, что дисплей: блок заставляет разрывать линию, а теги <br>, которые вы добавили, являются избыточными. Удалите их, и вы в бизнесе!
Другим решением является установка абсолютных значений INPUT и добавление реквизитов влево/вправо:
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
Вам нужно будет отрегулировать поля и т.д., так как они будут отсутствовать из относительного потока макета. Вы также можете добавить прокладки без проблем, так как вы не установили фиксированную ширину.
Этот метод широко поддерживается во всех браузерах.
У меня была эта проблема со 100% высотой, и в конце концов меня поразило, что ответом является использование отступа для элемента выше 100% высоты/ширины (то есть родителя).
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
Короче говоря, отступы родительского элемента имеют тот же эффект, что и поля дочернего элемента!
Вы можете настроить ширину текстового поля от 100% до 95%. Теперь это выглядит хорошо
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
Смотрите это: http://jsfiddle.net/wuSDh/