html - 输入和提交按钮的大小(百分比)

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/