css - 如何使输入字段（文本）在 div 结束的地方结束？

Question

如何使输入字段（文本）在 div 结束的地方结束？现在他们通过灰色盒子。请参阅 jsfiddle。

http://jsfiddle.net/FNZD6/

input[type="text"].normal100{
display:block;
font-size: 1.6em;
width:100%;
margin:0px;
padding: 0px;
}

Answer 1

我不太确定为什么会发生这种情况，但这里有一个修复方法。

*{
  box-sizing: border-box;
}

您也需要为其添加前缀。我总是box-sizing在所有东西上设置，但如果你愿意，你可以在特定元素上设置它。

演示

Answer 2

由于左右边框，该input字段略大于示例中的 div。解决这个问题的最简单方法是将它们显式设置为 0：

input[type="text"].normal100{
    display:block;
    font-size: 1.6em;
    width:100%;
    margin:0;
    padding:0;
    border-left:0;
    border-right:0;
}

你可能想给你的 div 添加一个边框。