在html中输入占位符标记

Question

我已经给输入框提供了100％的宽度来修复浏览器宽度但是当我添加占位符时，输入框将超出浏览器宽度并且水平滚动条即将到来。 我不希望滚动条出现。有什么想法??

这是我的输入标签

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

Answer 1

您可以使用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＆amp;下方。

Answer 2

使其成为98％而不是100％。如果将宽度设置为100％，则表示内容宽度，元素占用的总宽度为100％加上边框宽度的两倍加上填充的两倍。 98％的值当然只是猜测，但通常都足够好。

还有其他更好的方法。对于可用性，可见宽度应反映预期正常输入的宽度，因此应足以将HTML中的width属性设置为合适的数字。 （价值取决于您期望的数字类型;国际电话号码可能相当长。）

Answer 3

使用css3属性框大小调整，您可以重新定义宽度意味着包含外部填充和边框（不是边距）。

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

不幸的是因为它是CSS3，所有IE都不支持此属性（IE6和IE7不支持）。您可以在此处详细了解：w3schools