Input width with type submit less than input with type text

依然范特西╮ 提交于 2019-12-01 17:11:51

问题


I don't understand why input width with type submit less than input with type text. Could you help me with it?

HTML:

<div class="test">
    <input type="text" placeholder="test" />
</div>
<div class="test">
    <input type="text" placeholder="test" />
</div>
<div class="test">
    <input type="submit" value="test" />
</div>

CSS:

input {
    width: 200px;
}

http://jsfiddle.net/dve2h1dt/

Thanks in advance.


回答1:


The two input types have their own default styling (margin, padding etc). In order to include these in the width calculation to normalize the set width, use box-sizing:border-box;

Change your CSS to:

input {
    width: 200px;
    box-sizing:border-box;
}

More on box-sizing from MDN

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements.




回答2:


Demo

The box model being used is different for both the inputs, you can make the box models the same by specifying them box-sizing

css

input {
    width: 200px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


来源:https://stackoverflow.com/questions/25281511/input-width-with-type-submit-less-than-input-with-type-text

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!