CSS：输入字段和选择选项错误？

Question

为什么输入字段在我将它们设置为100％时总是“覆盖”包含它们的div？

的CSS，

.item-form {
    margin:0px 0px 10px 0px;
    clear:both;
    border:1px solid #999966;
} 

.item-form  input,  
.item-form textarea,
    {
    background-color:#ffffff;
    border: 1px solid #dddddd; 
    width:100%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
}

HTML，

<div class="item-form">
    <input name="username" type="text" id="username" value="" title="USER NAME"/>
</div>

输出，

我该如何解决？

感谢。

编辑：

我似乎修复了输入字段问题，但后来遇到了另一个问题 - 选择字段，

.item-form {
    margin:0px 0px 10px 0px;
    padding:0px 6px 0px 0px; /** important **/
    clear:both;
    }

.item-form select{
    border: 1px solid #dddddd; 
    width:100%; /** a bug to fix **/
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    padding:2px 2px 2px 2px;
    color:#999;
    }

现在选择字段是“运行不足”!!

我该如何解决这个问题？

感谢。

Answer 1

输入100％宽度，然后为每边添加2px填充和1px边框。结果是输入宽度为6px。

要修复，您需要通过向父元素添加填充来限制输入可用的宽度。在这种情况下，请向.item-form添加6px 右边填充：

.item-form {
    padding-right: 6px;
} 

.item-form input,  
.item-form textarea {
    width: 100%;
    padding: 2px;
}

选择是奇怪的，因为他们不遵循上面的规则（100％宽度包括填充） - 因此你不想要限制其父级的宽度。所以诀窍是只在输入和textareas周围放置带填充的包装元素，而不是选择。

有关像素完美对齐的信息，请参阅this example。

Answer 2

使用outline代替border。 border影响布局，因为它为边框腾出空间。 outline只是描边（或勾勒）边缘而没有定位变化。它是两个像素，因为你在两侧有两个一个像素的边框，导致它出现两个像素。