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

Question

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

Основной пример кода:

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

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

Answer 1

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

input{box-sizing:border-box} 

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

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

Пункты, которые он делает относительно отступов, также применимы к границе.

Есть даже компасный миксин, облегчающий поддержку старых браузеров. (http://compass -style.org / ссылка / компас / CSS3 / box_sizing / )

Answer 2

Это сделало работу для меня:

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

Answer 3

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

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

Answer 4

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

Вы можете либо:

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

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

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

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

Можно, конечно, использовать

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

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

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

Answer 6

Попробуйте ввести width : 100%; box-sizing: border-box;

Answer 7

Вместо применения стиля непосредственно к элементу ввода, возможно, абстрагируйте 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? Я не удивлюсь, если бы вы могли создать лучший макет, который бы избавил вас от необходимости делать это ...