7

我正在设计一个 100% 宽度和 10px 填充的文本输入,如下所示:

<div class="wrapper">
    Outer element
    <form method="get" id="searchform" action="#">
        <input type="text" class="field" name="s" id="s" placeholder="Search here...">
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="GO">
    </form>
</div>

CSS:

.wrapper {
    background: #ccc;
    padding: 20px;
    width: 200px;
}

#s {
    width: 100%;
    display:block;
    padding: 10px;
}

#searchsubmit {
    display: block;
    width: 100%;
    padding: 10px;
}

问题是文本输入超出了包装的宽度。请参见此处的示例

我尝试添加“box-sizing:border-box”和-moz-box-sizing:border-box”但我仍然看到输入在某些浏览器(例如Android)上超过100%。

有针对这个的解决方法吗?

4

2 回答 2

20

使用box-sizing

#s {
    width: 100%;
    display:block;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这是一个演示。

注意:自 IE8 以来所有主流浏览器都支持它。对于 Android,请不要忘记-webkit前缀。更多细节

于 2013-05-05T19:40:18.937 回答
0

删除左右padding。如果您需要padding,请使用width.

#s 
{
    width: 99%;
    display:block;
    padding: 10px 0;
}
于 2013-05-05T19:52:16.857 回答