O que está impedindo a minha elemento de entrada de apresentar como um elemento de bloco?

Question

http://jsfiddle.net/aam7J/

Como eu poderia induzir div-como o comportamento do elemento de entrada?Especificamente, como posso induzir a largura para expandir de tal forma que o seu exterior de largura, incluindo a margem enche-se o recipiente? width: 100% não funciona, porque ele não leva em conta o outro modelo de caixa de atributos.

Answer 1

Eu uso um "hack" para a conta para a entrada de largura da borda algo parecido com isso...

<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;
}

Meu adjustForTheInputBorder classe tende a ter um nome, que mais apropriadamente, transmite o meu ódio de css embora...:)

P. S. div renderiza como display:block por padrão, você não precisa que existe.