Question

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

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/

提前致谢。

Answer 1

两种input类型都有自己的默认样式（边距，填充等）。要在宽度计算中包含这些以规范化设置宽度，请使用box-sizing:border-box;

将CSS更改为：

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

More on box-sizing from MDN

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

Answer 2

<强> Demo

正在使用的盒子模型对于两个输入都是不同的，您可以通过指定它们来使盒子模型相同box-sizing

CSS

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

输入宽度类型提交少于输入类型文本

2 个答案: