是什么阻止我的输入元素像块元素一样显示？

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 < code>div 默认情况下呈现为 display:block ，您不需要在那里。