Могу ли я остановить текстовые поля шириной 100% от расширения их контейнеров?

Ответ 1

Что вы можете сделать, так это удалить "дополнительные" по умолчанию на 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>

Edit: Другой вариант заключается в том, чтобы вместо удаления стиля из input компенсировать его в обернутом div:

input.wide {width:100%;}

<div style="padding-right:4px;padding-left:1px;margin-right:2px">
  <input type="text" class="wide" />
</div>

Это даст вам несколько разные результаты в разных браузерах, но они не будут перекрывать контейнер. Значения в div зависят от того, насколько велика граница на input и сколько места вы хотите между input и границей.

Ответ 2

Есть ли способ сделать текстовое поле заполнять ширину его контейнера, не расширяясь за его пределами?

Да: с помощью свойства CSSize: box-size: border-box вы можете переопределить, что означает "ширина", чтобы включить внешнее дополнение и границу.

К сожалению, поскольку CSS3, поддержка не очень зрелая, и поскольку процесс спецификации еще не закончен, у него разные временные имена в браузерах. Итак:

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Альтернатива старой школы - просто добавить количество "padding-right" на прилагаемом элементе div > или <td> , равном примерно количеству дополнительных левых и правых дополнений/границ в 'px, думают, что браузер предоставит вход. (Обычно 6px для IE < 8.)

Ответ 3

Просто я столкнулся с этой проблемой, и единственным решением, которое я смог найти во всех моих тестовых браузерах (IE6, IE7, Firefox), было следующее:

• Оберните поле ввода двумя отдельными DIV
• Установите внешний 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>

Здесь полное горизонтальное переполнение для входного элемента - 6px - 2x (padding + border) - поэтому мы устанавливаем padding-right для внутреннего DIV 6px.

Ответ 4

Это решило проблему для меня!

Без необходимости внешнего div. Просто примените его к вашему текстовому полю.

box-sizing: border-box; 

С этим свойством "Свойства ширины и высоты (и свойства min/max) включают в себя содержимое, заполнение и границу, но не поле"

См. описание свойства w3schools.

Надеюсь, это поможет кому-то!

Ответ 5

поддержка размера коробки очень хороша: http://caniuse.com/#search=box-sizing

Поэтому, если вы не нацеливаете IE7, вы должны решить такие проблемы, используя это свойство. Слой, такой как sass или less, упрощает обработку правил с префиксом, например, btw.

Ответ 6

Собственно, это потому, что CSS определяет 100% относительно всей ширины контейнера, включая его поля, границы и отступы; это означает, что пространство avail. его содержание составляет некоторую сумму меньше 100%, если у контейнера нет полей, границ или отступов.

Это противоречит интуиции и широко рассматривается многими как ошибка, с которой мы сейчас сталкиваемся. Это эффективно означает, что размеры% не подходят ни для чего другого, кроме контейнера верхнего уровня, и даже тогда, только если у него нет полей, границ или отступов.

Обратите внимание, что поля поля, границы и отступы включены в заданный для него размер CSS - это контейнер, который отбрасывает вещи.

Я неплохо справился с этим, используя 98%, но это менее совершенное решение, так как поля ввода, как правило, уменьшаются, поскольку контейнер становится больше.

EDIT: я столкнулся с этим похожим вопросом - я никогда не пробовал ответ , и Я не знаю точно, относится ли это к вашей проблеме, но похоже, что это будет.

Ответ 7

Одно решение, которое может работать (оно работает для меня), - это применить отрицательный запас на входе (текстовое поле)... или фиксированную ширину для ie7 или отказаться от поддержки ie7. Это приводит к идеальной ширине пикселя.. Для меня его 7, поэтому я добавил 3 и 4, но он по-прежнему пиксель идеален.

У меня была та же проблема, и я ненавидел иметь дополнительные div для границы и т.д.!

Итак, вот мое решение, которое, похоже, работает!

Вы должны использовать только таблицу стилей ie7, чтобы избежать стартов.

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}

Ответ 8

Если вы не можете использовать box-sizing:border-box, вы можете попробовать удалить width:100% и поместить очень большой атрибут size в элемент <input>, но вам придется изменить html и не можете сделайте это только с помощью CSS:

<input size="1000"></input>

Ответ 9

Если вам не нужно делать это динамически (например, ваша форма имеет фиксированную ширину), вы можете просто установить ширину дочерних элементов <input> на ширину своего контейнера минус любые украшения, такие как заполнение, край, границы и т.д.:

 // the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
  font-size: 16px;
  height: auto;
  display: block;
  width: 280px;
  margin-bottom: 15px;
  padding: 7px 9px;
}

Ответ 10

Если вы не можете использовать размер окна (например, при преобразовании HTML в PDF с помощью iText). Попробуйте следующее:

CSS

.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; } 
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }

HTML

<div class="input-wrapper">
     <input type="text" value="" name="city"/>
</div>

Ответ 11

Это работает:

<div>
    <input type="text" 
        style="margin: 5px; padding: 4px; border: 1px solid; 
        width: 200px; width: calc(100% - 20px);">
</div>

Первая "ширина" - это правило возврата для старых браузеров.

Ответ 12

Просто введите ввод для смещения для дополнительного заполнения. В следующем примере заполнение на входе будет 10px слева и справа для полного смещения заполнения 20px:

input[type=text]{
   width: calc(100% - 20px);
}