CSS切断输入框的末尾

Question

为了善良！为什么我的输入框被切断了？我已经调查了铬的填充和边距，我看不到它是什么造成的。我是新手，但它仍然是一个谜。

http://jsfiddle.net/GCt3z/1/

Answer 1

因为它是100％+ 10px（填充）+ 2px（边框）宽。尝试使用：

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
        box-sizing: border-box;

查看更新的小提琴＆gt; http://jsfiddle.net/GCt3z/2/

Answer 2

.fieldwrapper有overflow: hidden。您将label设置为float，这意味着下一个div将获得整个包装器的宽度。这会将它移动到标签的右侧，使其等于两个标签的父级。您需要为.fieldwrapper设置固定宽度。

Answer 3

您输入的内容比溢出设置为隐藏的父级长。

Answer 4

将.fieldwrapper更改为{ overflow: auto;}，您可以看到输入溢出了该div。

Answer 5

尝试在width:100%课程中将width:96%缩减为.field，然后问题就会解决