У меня есть html-ввод.
Вход имеет padding: 5px 10px; Я хочу, чтобы он был на 100% от ширины родительского div (что является текучим).
Однако использование width: 100%; приводит к тому, что ввод будет 100% + 20px, как я могу обойти это?
box-sizing: border-box - это быстрый и простой способ исправить это:
Это будет работать во всех современных браузерах и IE8+.
Вот демо: http://jsfiddle.net/thirtydot/QkmSk/301/
.content {
width: 100%;
box-sizing: border-box;
}
Версии с префиксом браузера (-webkit-box-sizing и т.д.) не нужны в современных браузерах.
Вот почему мы box-sizing в CSS.
Ive отредактировал ваш пример, и теперь он работает в Safari, Chrome, Firefox и Opera. Проверьте это: http://jsfiddle.net/mathias/Bupr3/ Все, что я добавил, это:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
К сожалению, старые браузеры, такие как IE7, не поддерживают это. Если вы ищете решение, которое работает в старых IE, проверьте другие ответы.
Используйте дополнение в процентах и удалите из ширины:
padding: 5%; width: 90%;
Вы можете сделать это, не используя box-sizing и не чистые решения, такие как width~=99%.
padding и bordermargin= border-width + horizontal paddingpadding, равную margin с предыдущего шагаРазметка HTML:
<div class="input_wrap">
<input type="text" />
</div>
CSS
div {
padding: 6px 10px; /* equal to negative input margin for mimic normal `div` box-sizing */
}
input {
width: 100%; /* force to expand to container width */
padding: 5px 10px;
border: none;
margin: 0 -10px; /* negative margin = border-width + horizontal padding */
}
Используйте css calc()
Супер просто и круто.
input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}
Как видно здесь: Ширина деления 100% минус фиксированное количество пикселей
ПоWebvitaly (https://stackoverflow.com/users/713523/webvitaly)
Первоначальный источник: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/
Просто скопировал это сюда, потому что я чуть не пропустил это в другой ветке.
Предполагая, что я в контейнере с дополнением 15px, это то, что я всегда использую для внутренней части:
width:auto;
right:15px;
left:15px;
Это растянет внутреннюю часть до любой ширины, которая должна быть меньше 15 пикселей с каждой стороны.
Приветствия
Andy
Вы можете попробовать некоторые приемы позиционирования. Вы можете поместить вход в div с position: relative и фиксированной высотой, затем на входе есть position: absolute; left: 0; right: 0;, и любой отступ, который вам нравится.
Переместите поле ввода ввода в элемент оболочки.
<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>
<div class="outer">
<div class="inner">
<input/>
</div>
</div>
См. пример здесь: http://jsfiddle.net/L7wYD/1/
Вот рекомендация codeontrack.com, в которой есть хорошие примеры решений:
Вместо того, чтобы устанавливать ширину div на 100%, установите его на auto и убедитесь, что
<div>установлен на display: block (по умолчанию для<div>).
Просто понять разницу между width: auto; и ширина: 100%; Ширина: авто; будет (АВТО) MATICALLY рассчитать ширину, чтобы соответствовать точной заданной с оберткой div, включая прокладку. Ширина 100% расширяет ширину и добавляет отступы.
Как обернуть его в контейнер. Контейнер shoud имеет стиль вроде:
{
width:100%;
border: 10px solid transparent;
}
У меня была такая же проблема. Исправьте его так:
width: 100%;
padding: 5px;
/*--------------Now remove from padding what you've added---------------*/
margin:-5px;
Приветствия
Попробуйте следующее:
width: 100%;
box-sizing: border-box;
Для меня, используя margin:15px;padding:10px 0 15px 23px;width:100%, результат был такой:
Для меня было решение использовать width:auto вместо width:100%. Мой новый код был:
margin:15px;padding:10px 0 15px 23px;width:auto. Тогда элемент выровнен правильно:
Вы можете сделать это:
width: auto;
padding: 20px;