输入宽度，类型提交小于输入类型文本 [英] Input width with type submit less than input with type text

问题描述

我不明白为什么输入宽度与类型提交少于输入与类型文本。你能帮我吗？

HTML：

  div class =test> 
< input type =textplaceholder =test/> 
< / div> 
< div class =test> 
< input type =textplaceholder =test/> 
< / div> 
< div class =test> 
< input type =submitvalue =test/> 
< / div> 
  

CSS：

 code> input {
 width：200px; 
} 
  

http://jsfiddle.net/dve2h1dt/

提前感谢。

两个输入类型有自己的默认样式（边距，填充等）。为了在宽度计算中包括这些值以规范化设置宽度，请使用 box-sizing：border-box;

将CSS更改为：

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

更多关于盒尺寸从MDN

box-sizing CSS属性用于改变默认的CSS盒子模型
用于计算元素的宽度和高度。

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.

解决方案

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.

这篇关于输入宽度，类型提交小于输入类型文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！