Я могу мешать Текстовым полям 100% шириной расшириться вне их контейнеров?
API, на который вы ссылаетесь, не позволяет настраивать.
4 ответа
То, что Вы могли сделать, должно удалить "отдельно оплачиваемые предметы" по умолчанию на input:
input.wide {display:block; width:100%;padding:0;border-width:0}
Это сохранит input внутренняя часть его контейнер. Теперь, если Вы действительно хотите границы, переноситесь input в div с набором границ на div (тот способ, которым можно удалить display:block из input также). Что-то как:
<div style="border:1px solid gray;">
<input type="text" class="wide" />
</div>
Редактирование: Другая опция к, вместо того, чтобы удалить стиль из эти input, компенсируйте его в обернутом div:
input.wide {width:100%;}
<div style="padding-right:4px;padding-left:1px;margin-right:2px">
<input type="text" class="wide" />
</div>
Это даст Вам несколько различные результаты в различных браузерах, но они не перекроют контейнер. Значения в отделении зависят от того, насколько большой граница находится на input и сколько пространства Вы хотите между input и граница.
там какой-либо способ заставить текстовое поле заполнить ширину своего контейнера, не расширяясь вне его?
Да: при помощи вЂbox-калибровки свойства CSS3: border-box’, можно переопределить, какой вЂwidth’ означает включать внешнее дополнение и границу.
, К сожалению, потому что это - CSS3, поддержка не очень зрела, и поскольку процесс спецификации еще не закончен, это имеет различные временные имена в браузерах тем временем. Так:
input.wide {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
олдскульная альтернатива должна просто поместить количество вЂpadding-right’ на включении < отделение> или < td> элемент равняется приблизительно, сколько дополнительного левого и правого дополнения/границы в вЂpx’ Вы думаете, что браузеры дадут вход. (Обычно 6 пкс для IE< 8.)
Просто столкнулся с этой проблемой самостоятельно и единственным решением, я мог найти, что это работало во всех моих тестовых браузерах (IE6, IE7, Firefox) было следующим:
- Обертка поле ввода в двух отдельных ОТДЕЛЕНИЯХ
- Набор внешний DIV к ширине 100%, это препятствует тому, чтобы наш контейнер переполнил документа
- Помещенное дополнение во внутреннем DIV точной суммы для компенсации горизонтального переполнения входа.
- Набор пользовательское дополнение на входе, таким образом, это переполняется той же суммой, как я допускал во внутреннем DIV
код:
<div style="width: 100%">
<div style="padding-right: 6px;">
<input type="text" style="width: 100%; padding: 2px; margin: 0;
border : solid 1px #999" />
</div>
</div>
Здесь, общее горизонтальное переполнение для входного элемента составляет 6 пкс - 2x (дополняющий + граница) - таким образом, мы устанавливаем дополнительное право для внутреннего DIV 6 пкс.
На самом деле это - потому что CSS определяет 100% относительно всей ширины контейнера, включая его поля, границы и дополнение; это означает, что пространство помогает. к его содержанию некоторая сумма, меньшая, чем 100%, если контейнер не имеет никаких полей, границ или дополнения.
Это парадоксально и широко расцененное многими, чтобы быть ошибкой, что мы теперь застреваем с . Это эффективно означает, что размеры % бесполезны для чего-либо кроме высокоуровневого контейнера, и даже тогда, только если это не имеет никаких полей, границ или дополнения.
Примечание, что поля текстового поля, границы и дополнение включены в размер CSS, определенный для него - это - контейнер, которые отбрасывают вещи.
я терпимо работал вокруг этого при помощи 98%, но это меньше, чем идеальное решение, так как поля ввода имеют тенденцию далее терпеть неудачу, поскольку контейнер становится больше.
<час>РЕДАКТИРОВАНИЕ: Я столкнулся с этим подобный вопрос - я никогда не пробовал ответ данный, и я не знаю наверняка, если он относится к Вашей проблеме, но кажется, что он будет.