Cosa sta mantenendo il mio elemento di input da visualizzare come un elemento di blocco?

Question

http://jsfiddle.net/aam7J/

Come potrei indurre div simile comportamento da elemento di input? Specificamente, come posso indurre la larghezza di espandere tale che la sua larghezza esterna compresa riempimenti margine sino contenitore? width: 100% non funziona, perché non prende in considerazione gli altri attributi modello di dialogo.

Answer 1

Io uso un "hack" per conto per il bordo di ingresso larghezza di qualcosa di simile ...

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

La mia classe adjustForTheInputBorder tende ad avere un nome che esprime in modo più appropriato il mio odio di css però ...:)

P.S. div rende come display:block per impostazione predefinita, non è necessario che ci.