输入和提交按钮的大小百分比

Question

我正在尝试设置按钮的大小并以百分比编辑

<div style="height: 200px; width: 200px;">
    <input type="text" name="input" style="width: 90%; margin-bottom: 5px;height: 30px;" />
    <br />
    <input type="submit" name="button" value="Login" style="width: 90%;height:30px;" />
</div>

但线性大小不同。为什么呢？

Answer 1

这里的问题是属性box-sizing。默认情况下，input type="submit"具有以下内容：

box-sizing:border-box;

这使得边界位于定义的width:90%内。另一方面，input type="text"没有属性，边界位于最后width之外。

这应该可以解决问题：

input {
  -webkit-box-sizing:border-box;  /*Safari/Chrome*/
  -moz-box-sizing:border-box;  /*Firefox*/
  box-sizing:border-box;  
}

_{不要忘记使其适用于所有浏览器的前缀}

演示 http://jsfiddle.net/VY7Nn/10/