1

我已经为输入框提供了 100% 的宽度以固定到浏览器宽度，但是当我添加占位符时，输入框超出了浏览器宽度并且水平滚动条即将到来。我不希望出现滚动条。任何想法？？

这是我的输入标签

 <input type="tel" tabindex="9" maxlength="12" placeholder="XXX-XXX-XXXX" value="" name="mobileNumber" />
4

3 回答 3

0

您可以为此使用box-sizing:border-box属性。像这样编写：

input{
    width:100%;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

检查这个http://jsfiddle.net/9rprY/。

但它不适用于 IE7 及以下版本。

于 2012-06-15T06:54:14.203 回答
0

让它变成 98% 而不是 100%。如果将宽度设置为 100%，则表示内容宽度，元素占用的总宽度为 100% 加上两倍边框宽度加上两倍内边距。98% 的值当然只是一个猜测，但通常足够好。

还有其他更好的方法。为了可用性，可见宽度应该反映预期正常输入的宽度，因此将widthHTML 中的属性设置为合适的数字就足够了。（该值取决于您期望的号码类型；国际电话号码可能很长。）

于 2012-06-15T07:10:19.847 回答
0

使用 css3 属性 box-sizing 您可以重新定义宽度意味着包括外部填充和边框（不是边距）。

input{
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

不幸的是，因为它是 CSS3，所以并非所有 IE 都支持此属性（IE6 和 IE7 不支持）。你可以在这里阅读更多信息：w3schools

于 2012-06-15T07:20:46.093 回答