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

为什么当我将它们设置为100％时，输入字段总是“超出”包含它们的div？CSS：输入字段和选择选项错误？

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>

输出， enter image description here

我该如何解决？

谢谢。

编辑：

我似乎有固定的输入域的问题，但后来我遇到另一个问题就来了 - 选择字段，

.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; 
    }

现在选择字段是“欠跑'！！

我该如何解决这个问题？

谢谢。

来源

2011-03-31 laukok

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

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

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

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

选择是奇数的了，因为它们不遵循上述规则（100％宽度包括填充） - 因此你不要想限制他们父母的宽度。所以诀窍是只在输入和textareas周围填充包装元素，而不是围绕选择。

请参阅this example以获得像素完美对齐。

来源

2011-03-31 03:14:06

非常感谢。但现在我有另一个问题 - 选择字段。请检查我上面的编辑。谢谢。 – laukok 2011-03-31 03:34:38

@lauthiamkok，你的新输入CSS是什么？ – 2011-03-31 03:41:57

和以前一样...我应该改变它吗？ – laukok 2011-03-31 03:47:25

使用outline而不是border。 border影响布局，因为它为边界腾出空间。 outline只需简单地描绘（或概述）边缘并且不进行定位更改。这是两个像素，因为在两边都有两个单像素边框，导致它出现两个像素。

来源

2011-03-31 03:35:31

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

回答

相关问题