Что мешает моему элементу ввода отображаться как элемент блока?

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 по умолчанию, вам это не нужно.