3

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

现在选择字段是'under-run'！！

在此处输入图像描述

我该如何解决？？

谢谢。

4

2 回答 2

1

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

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

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

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

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

有关像素完美对齐的信息，请参阅此示例。

于 2011-03-31T03:14:06.330 回答
0

使用outline而不是border. border影响布局，因为它为边框腾出空间。outline只需描边（或勾勒出）边缘，没有位置变化。它超过了两个像素，因为两边都有两个单像素边框，导致它出现两个像素。

于 2011-03-31T03:35:31.573 回答