Как сделать ширину элемента: 100% минус отступы?

У меня есть ввод 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.

Я отредактировал ваш пример, и теперь он работает в 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, посмотрите другие ответы.

Используйте отступы в процентах и ​​удалите из ширины:

набивка: 5%;
ширина: 90%;

Вы можете сделать это без использования box-sizingи непонятных решений вроде width~=99%.

Демо на jsFiddle :

• Держите вход paddingиborder
• Добавить к входу отрицательный горизонтальный margin= border-width+horizontal padding
• Добавить к обертке ввода по горизонтали, paddingравной marginпредыдущему шагу

HTML-разметка:

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

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's 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 -ширин-100prc-минус 100px /

Просто скопировал это сюда, потому что я чуть не пропустил это в другой ветке.

Предполагая, что я нахожусь в контейнере с отступом 15 пикселей, это то, что я всегда использую для внутренней части:

width:auto;
right:15px;
left:15px;

Это растянет внутреннюю часть до любой ширины, она должна быть меньше 15 пикселей с обеих сторон.

Вы можете попробовать некоторые приемы позиционирования. Вы можете поместить вход в div с position: relativeфиксированной высотой, затем на вход иметь position: absolute; left: 0; right: 0;и любой отступ, который вам нравится.

Живой пример

Вот рекомендация codeontrack.com , в которой есть хорошие примеры решений:

Вместо того, чтобы устанавливать ширину div на 100%, установите для него значение auto и убедитесь, что <div>для параметра display: block (значение по умолчанию для <div>).

Переместите отступ поля ввода в элемент оболочки.

<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/

Просто поймите разницу между шириной: авто; и ширина: 100%; Ширина: авто; (АВТО) МАТИЧЕСКИ вычислит ширину, чтобы соответствовать точному заданному с div обтекания, включая отступы. Ширина на 100% расширяет ширину и добавляет отступы.

Как насчет упаковки в контейнер. Контейнер должен иметь стиль как:

{
    width:100%;
    border: 10px solid transparent;
}

Попробуй это:

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: 100%;
box-sizing: border-box;

Ты можешь сделать это:

width: auto;
padding: 20px;