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 以降、すべての主要なブラウザーでサポートされています。-webkitAndroid の場合は、プレフィックスを忘れないでください。詳細

于 2013-05-05T19:40:18.937 に答える
0

左右を外しpaddingます。が必要な場合はpadding、 で遊んでwidthください。

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