css - 是什么让我的输入元素无法像块元素一样显示？

Question

http://jsfiddle.net/aam7J/

我将如何在输入元素上引发类似 div 的行为？具体来说，如何诱导宽度扩大，使其外部宽度（包括边距）填满容器？width: 100%不起作用，因为它没有考虑其他盒子模型属性。

Answer 1

我使用“hack”来解释输入边框宽度，如下所示......

<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，你不需要在那里。