Что удерживает мой элемент ввода от отображения как элемента блока?

Question

http://jsfiddle.net/aam7J/

Как бы я индуцировал поведение div-типа на входном элементе? В частности, как я могу заставить ширину расширять, чтобы ее внешняя ширина, включая край, заполняла контейнер? width: 100% не работает, поскольку он не учитывает другие атрибуты модели коробки.

Answer 1

Я использую «взломать» для учета ввода границы шириной что-то вроде этого ...

<div>hello world</div> 
​ 
<div class="adjustForTheInputBorder"> 
    <input type="text" /> 
</div> 


input 
{ 
    width:100%; 
    border-width:2px; 
} 

div.adjustForTheInputBorder 
{ 
    margin-right: 4px; /* or 2x whatever your input border width is */ 
} 

div 
{ 
    background-color: pink; 
} 

Мой adjustForTheInputBorder класс стремится иметь имя, которое более точно передает свою ненависть к CSS, хотя ...)

PS div отображается как display:block по умолчанию, вам это не нужно.