У меня есть ввод HTML.
На входе padding: 5px 10px;
я хочу, чтобы он составлял 100% от ширины родительского div (который является жидким).
Тем не менее, использование width: 100%;
приводит к тому, что ввод будет 100% + 20px
как обойти это?
html
css
width
fluid-layout
Hailwood
источник
источник
input
и поддержку IE7Ответы:
box-sizing: border-box
это быстрый и простой способ исправить это:Это будет работать во всех современных браузерах и IE8 +.
Вот демонстрация: http://jsfiddle.net/thirtydot/QkmSk/301/
Версии с префиксом браузера (
-webkit-box-sizing
и т. Д.) Не требуются в современных браузерах.источник
Вот почему мы имеем
box-sizing
в CSS.Я отредактировал ваш пример, и теперь он работает в Safari, Chrome, Firefox и Opera. Проверьте это: http://jsfiddle.net/mathias/Bupr3/ Все, что я добавил, было это:
К сожалению, старые браузеры, такие как IE7, не поддерживают это. Если вы ищете решение, которое работает в старых IE, посмотрите другие ответы.
источник
Используйте отступы в процентах и удалите из ширины:
источник
Вы можете сделать это без использования
box-sizing
и непонятных решений вродеwidth~=99%
.Демо на jsFiddle :
padding
иborder
margin
=border-width
+horizontal padding
padding
равнойmargin
предыдущему шагуHTML-разметка:
CSS:
источник
Используйте css calc ()
Супер просто и круто.
Как видно здесь: ширина
деления 100% минус фиксированное количество пикселей. По webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Первоисточник: http://web-profile.com.ua/css/dev/css -ширин-100prc-минус 100px /
Просто скопировал это сюда, потому что я чуть не пропустил это в другой ветке.
источник
Предполагая, что я нахожусь в контейнере с отступом 15 пикселей, это то, что я всегда использую для внутренней части:
Это растянет внутреннюю часть до любой ширины, она должна быть меньше 15 пикселей с обеих сторон.
источник
width:auto
применения кinput
полю?Вы можете попробовать некоторые приемы позиционирования. Вы можете поместить вход в div с
position: relative
фиксированной высотой, затем на вход иметьposition: absolute; left: 0; right: 0;
и любой отступ, который вам нравится.Живой пример
источник
<input>
элементами в Firefox (idk о IE). Это работает с<div>
s, хотя. И нет,display: block
на<input>
не работает тоже: - /Вот рекомендация codeontrack.com , в которой есть хорошие примеры решений:
источник
Переместите отступ поля ввода в элемент оболочки.
Смотрите пример здесь: http://jsfiddle.net/L7wYD/1/
источник
Просто поймите разницу между шириной: авто; и ширина: 100%; Ширина: авто; (АВТО) МАТИЧЕСКИ вычислит ширину, чтобы соответствовать точному заданному с div обтекания, включая отступы. Ширина на 100% расширяет ширину и добавляет отступы.
источник
Как насчет упаковки в контейнер. Контейнер должен иметь стиль как:
источник
Попробуй это:
источник
Для меня, используя
margin:15px;padding:10px 0 15px 23px;width:100%
, результат был такой:Решение для меня было использовать
width:auto
вместоwidth:100%
. Мой новый код был:margin:15px;padding:10px 0 15px 23px;width:auto
, Тогда элемент выровнен правильно:источник
Я была такая же проблема. Исправьте это так:
источник
Ты можешь сделать это:
источник