Элемент ввода HTML шире, чем Содержащий Div

У меня есть элемент html, который содержится в div. Высота продиктована внешним div, а высота и ширина входного управления 100%. На самом базовом уровне у меня возникает проблема, когда текстовое поле проходит справа от содержащего div.

Код базового примера:

<div style="height:25px; width: 150px;">
     <input type="text" style="height:100%; width:100%"  />
</div>

Реализация этого элемента управления намного сложнее, чем это, но все же, когда элемент управления удаляется до этого уровня, у меня есть проблема, когда текстовое поле торчит из содержащего div.

Ответ 1

Вы можете использовать box-size: border-box, чтобы позаботиться об этом. Просто поставьте в файле css следующее:

input{box-sizing:border-box}

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

Пол Ирландский имеет действительно хорошую должность, объясняющую эту технику http://paulirish.com/2012/box-sizing-border-box-ftw

Точки, которые он делает с дополнением, также применяются к границе.

Там даже компас смешивается, чтобы упростить поддержку старых браузеров. (http://compass-style.org/reference/compass/css3/box_sizing/)

Ответ 2

Это помогло мне:

input {
  padding: 0.2em; 
  box-sizing: border-box;
  width: 100% 
}

Ответ 3

К сожалению, это будет зависеть от браузера, с которым вы работаете, но установка ширины объекта (текстовое поле) не учитывает ширину границы объекта. большинство браузеров учитывают любые отступы от внешнего объекта и поля от содержащегося объекта, но некоторые (я смотрю на вас IE) не добавляют на границе при вычислении процентов;

ваш лучший выбор - изменить границу в текстовом поле или выбросить другой div между текстовым полем и контейнером с заполнением 2px с помощью margin-top: -2px и margin-left:-2px (я предполагаю на границе ширина)

Ответ 4

Я предполагаю, что вы хотите, чтобы содержащийся элемент (<input>) был меньше или содержался полностью внутри <div>?

Вы можете:

input {width: 50%; /* or whatever */ }

Ширина html-элемента вычисляется (я думаю) как заданная ширина + границы + margin + padding

Если вы уже определили вход как имеющую 100% ширину родительского элемента, а затем добавили другие атрибуты, он обязательно переполнит родительский div.

Вы можете установить значение margin/padding/border равным 0, но это, вероятно, не будет выглядеть хорошо. Так что проще, хотя и не обязательно идеально, просто использовать подходящую меньшую ширину.

Вы могли бы, конечно, использовать

#parent_div {overflow: hidden; /* or 'auto' or whatever */}

чтобы скрыть часть элемента ввода, которая обычно переполняет контейнер div.

Ответ 5

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

Следующий HTML-код выглядит хорошо. Но когда я добавляю doctype, появляется проблема

div.field_container
{
    height: 25px;
    width: 150px;
    border: 1px solid red;
}
div.field_container input
{
    height: 100%;
    width: 100%;
}
<div class="field_container">
    <input type="text" name="" value="" />
</div>

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

div.field_container
{
    height: 25px;
    width: 150px;
    padding-bottom: 6px;
    padding-right: 4px;
    border: 1px solid red;
}
div.field_container input
{
    height: 100%;
    width: 100%;
}
<div class="field_container">
    <input type="text" name="" value="" />
</div>

Если вы не можете изменить ширину контейнера, вы также можете использовать следующий трюк, но это все равно будет увеличивать высоту

div.field_container
{
    height: 25px;
    width: 150px;
    padding-bottom: 6px;
    border: 1px solid red;
}
div.field_container input
{
    height: 100%;
    width: 100%;
}
<div class="field_container">
    <div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div>
</div>

Ответ 6

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

div.field_container
{
  height: 25px;
  width: 150px;
}

div.field_container input
{
  height: 100%;
  width: 100%;
} 

<div class="field_container">
  <input type="text" name="" value="" />
</div>

Я выбегаю из двери, прежде чем я смогу проверить, поможет ли это вообще, но, по крайней мере, вы можете играть с настройками max-height/width на DIV css, чтобы он не прерывался, если мое решение не Работа. И абстрагирование CSS таким образом облегчает решение проблем с помощью плагина, такого как Firebug в Firefox.

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

Ответ 7

Попробуйте указать width: 100%; box-sizing: border-box; ввода width: 100%; box-sizing: border-box; width: 100%; box-sizing: border-box;