Ширина: 100%-пополнение?

Question

У меня есть вход HTML.

Вход имеет padding: 5px 10px; Я хочу, чтобы это было 100% ширины родительского div (который является жидким).

Однако используя width: 100%; вызывает ввод 100% + 20px как я могу обойти это?

пример

Answer 1

box-sizing: border-box это быстрый и простой способ исправить это:

Это будет работать во всех современных браузерах и IE8+.

Вот демо: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Браузер с префиксом версии (-webkit-box-sizing и т. д.) не нужны в современных браузерах.

Answer 2

Вот почему мы имеем 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, посмотрите другие ответы.

Answer 3

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

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

Answer 4

Используйте css calc()

Супер просто и круто.

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}​

Как видно здесь: ширина деления 100% минус фиксированное количество пикселей
По webvitaly ( webvitaly)
Оригинальный источник: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

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

Answer 5

Вы можете сделать это без использования 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 */ 
}

Answer 6

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

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

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

ура

Энди

Answer 7

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

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

Answer 8

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

Живой пример

Answer 9

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

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

Answer 10

Возможно, браузеры изменились с момента последнего ответа на этот вопрос, но это единственное, что у меня когда-либо надежно работало для этого:

          width: auto;
    left: 0;
    right: 0;

Затем вы можете сделать поля / отступы какими угодно, и элемент не будет расширяться за пределы своей доступной ширины.

Это похоже на ответ @andology из прошлого, но если вы сделаете влево / вправо оба 0, вы можете сделать margin и / или paddingвсе что пожелаете. Так что это всегда мой вариант по умолчанию div.

Answer 11

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

Answer 12

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

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

Answer 13

Я была такая же проблема. Исправьте это так:

width: 100%;
padding: 5px;
/*--------------Now remove from padding what you've added---------------*/
margin:-5px;

ура

Answer 14

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

width: 100%;
box-sizing: border-box;

Answer 15

Для меня использование margin:15px;padding:10px 0 15px 23px;width:100%, результат был таким:

https://s tackru.com/images/6f42f968a648ac660e8ba88d0bc7c3c1a2e9853d.png

Решением для меня было использовать width:auto вместо того width:100%. Мой новый код был:

margin:15px;padding:10px 0 15px 23px;width:auto. Затем элемент правильно выровнен:

https://s tackru.com/images/9ebc5ae17524519339b393e2d3a9ad91027275d4.png

Answer 16

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

width: auto;
padding: 20px;