обратите внимание на скрипку: http://jsfiddle.net/cBWaG/4/
У меня есть контейнер с дополнением. Я хочу, чтобы вход (текст) составлял 100% ширины в пределах отступов. В настоящее время, хотя он превысил заполнение. Предложения о том, как предотвратить ввод чрезмерной загрузки контейнера/прокладки без использования фиксированной ширины?
Спасибо
Вводы форм очень трудно стилизовать. И особенно сложно сделать стиль похожим на все браузеры. Один из лучших способов найти текстовые входы - это избавиться от границы, контура, отступов и полей. Затем завершите ввод в div с помощью границы, контура, отступов и полей, которые вы хотите.
Я думаю, что достиг того, чего ты хочешь. Проверьте этот разветвленный jsFiddle: http://jsfiddle.net/aP2Ju/
Свойство 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;.
Надеюсь, что это поможет.
попробуйте это
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
Создайте новый div внутри контейнера div без указанной ширины или заполнения. Он автоматически будет занимать всю ширину внутри прокладки. Затем вы можете ввести свой ввод шириной 100%, по которой он полностью заполняет внутренний div.
Просто примечание. Причиной этого является природа модели коробки. Ширина вашего <input> на самом деле составляет 100% + дополнение.
width: 100%;
Доступна ли ширина ширины элементов TOTAL, включая прописку, как определено ее родителем.
width: auto;
Расширит ваш элемент, чтобы заполнить пространство REMAINING.
Да, трудно обрабатывать размер входного элемента. Размер коробки не имеет большого значения, он все еще переполняет границу. Согласился, что использование 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%;
}