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


397

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

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

Тем не менее, использование width: 100%;приводит к тому, что ввод будет 100% + 20pxкак обойти это?

пример


1
Посмотрите ответ, который я отправил не 15 минут назад: stackoverflow.com/questions/5219030/… Это должно работать идеально для вас, если только вы не требуете его для работы в IE7.
Тридцатое

Если вы использовали мой метод, посмотрите небольшое изменение, которое я только что внес в свой ответ. Это обеспечивает "равномерное заполнение" в некоторых браузерах.
Тридцать

@Hailwood У меня есть решение, которое поддерживает заполнение inputи поддержку IE7
Владимир Старков

Пожалуйста, также посмотрите ответ ниже, используя функцию calc
Daan

Ответы:


487

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

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

Вот демонстрация: http://jsfiddle.net/thirtydot/QkmSk/301/

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

Версии с префиксом браузера ( -webkit-box-sizingи т. Д.) Не требуются в современных браузерах.


5
Я не думаю, что это плохое решение. Как правило, перенос элементов в дополнительный div - это хороший способ дополнить элементы, не увеличивая общую ширину элемента за пределами его родительского контейнера.
Джейк Уилсон

1
Заполнение div-обертки также дает неидентичные результаты для добавления padding непосредственно к входным данным.
Феликс Фунг

@thirtydot У меня есть несколько более гибких и элегантных решений, которые сохраняют ширину ввода
Владимир Старков

8
@thirtydot да, просто оставь его неработающим для IE7 и позволь M $ это исправить :)
Петр Пеллер

Это также сохраняет автоматическое изменение размера текстовых полей для любого из вас, jQuery, вместо того, чтобы изменять размеры ящиков, если вы не примените это к скрытому div.
Майкл Дж. Калкинс

276

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


3
+1, но caniuse.com/#search=box-sizing IE 8? Кроме того, github.com/Schepp/box-sizing-polyfill предлагает решение для IE 6-7.
Аликс Аксель

1
+1, это здорово, если вы не заботитесь об IE (например, при использовании PhoneGap)
Люк Б.

3
Что это за волшебство? +1 за ответ и +1 за комментарий выше меня (это именно то, что мне нужно).
Эдуард Лука

20
Это должно быть поведение по умолчанию .. вместо +20 к ширине. Иногда CSS кажется серьезно запутанным.
Soth

2
Чтобы прояснить поддержку размеров блоков в IE, для свойства размеров блоков IE зависит от режима документа IE, он работает в режиме стандартов IE8 и выше. Так что он будет работать в версии браузера IE8, даже если режим документа «Режим стандартов IE8». Надеюсь это поможет.
Санджив

40

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

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

19
Кстати, это решение идеально подходит только для негибких макетов.
Муфты

+1, проблема с этим будет границы, я думаю. Обычно они выглядят «правильно» только с максимум 1-3 пикселями. Результаты слишком непредсказуемы, учитывая несоответствия браузера в отношении субпиксельного округления.
Аликс Аксель

27

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

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

Согласитесь полностью !!! Я использовал это решение, и оно широко работает без подвохов! Это должно было быть решением для каждого из этих ответов ..
Andre Figueiredo

Я не совсем понимаю, какую роль играет отрицательное поле - все, что я знаю, это то, что, если значение неверно, то поле заканчивается в одну сторону, но каким-то образом симметричное поле исправляет это
Casebash

21

Используйте 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 /

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


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

11

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

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

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


Не могли бы вы опубликовать полный пример width:autoприменения к inputполю?
jakubiszon

это только половина ответа. положение элементов по умолчанию статично, поэтому left & right здесь ничего не сделают. и ширина auto также является начальным значением, так что .. весь этот ответ ничего не делает :)
honk31

5

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

Живой пример


В каких браузерах вы это тестировали? :(
тридцать седьмого

Хм, работает только в Chrome. Но я знаю, что у меня есть нечто очень похожее на работу в FF & IE.
Феликс

Похоже, что он не работает с <input>элементами в Firefox (idk о IE). Это работает с <div>s, хотя. И нет, display: blockна <input>не работает тоже: - /
Феликс

5

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

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


3
Вы не должны размещать ссылку напрямую. Вы можете включить информацию по этой ссылке. Причина в том, что, может быть, завтра эта ссылка будет недоступна, и тогда ваш ответ
утратит

4

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

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


2

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


Можете ли вы привести пример, где это работает с <input>? В противном случае вы просто отправляете людей в погоню за диким гусем.
Мистер Листер



-1

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

введите описание изображения здесь

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

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

введите описание изображения здесь



Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.