问题
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