首页 文章

停止文本输入，宽度为100％，10px填充超出100％宽度

提问于
浏览 次
6

我正在设置一个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;
}

问题是文本输入超出了包装器的宽度 . See example here .

我已经尝试添加“box-sizing：border-box”和-moz-box-sizing：border-box“但我仍然看到输入在某些浏览器上延伸超过100％，例如Android .

这个问题有方法解决吗？

css

2 回答

  • 19

    使用 box-sizing ：

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

    Here is a demo.

    注意：它's supported by all major browsers since IE8. For Android just don' t忘记 -webkit 前缀 . More Details

    回复于
  • 0

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

    #s 
{
    width: 99%;
    display:block;
    padding: 10px 0;
}
    回复于

相关问题