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

【问题标题】：CSS: input field and select option bugs?CSS：输入字段和选择选项错误？
【发布时间】：2011-03-31 03:11:41
【问题描述】：

为什么当我将输入字段设置为 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;
    }

现在选择字段“欠运行”！！

我该如何解决这个问题？？

谢谢。

【问题讨论】：

标签： html css width input-field

【解决方案1】：

它为输入提供 100% 的宽度，然后在每一侧添加 2px 的填充和 1px 的边框。结果是输入太宽了 6px。

要解决此问题，您需要通过向父元素添加填充来限制输入可用的宽度。在这种情况下，将 6px 右内边距添加到 .item-form:

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

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

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

请参阅this example 了解像素完美对齐。

【讨论】：

非常感谢。但现在我有另一个问题 - 选择字段。请检查我上面的编辑。谢谢。
@lauthiamkok，输入的新 CSS 是什么？
和以前一样...我应该改变它吗？
@lauthiamkok，查看我的更新（尤其是 jsfiddle 示例）。

【解决方案2】：

使用outline 代替border。 border 影响布局，因为它为边框腾出空间。 outline 只是描边（或勾勒）边缘，没有位置变化。它超过了两个像素，因为您在两侧都有两个单像素边框，这导致它出现两个像素以上。

【讨论】：