css - Div が画面を超えて広がる

Question

こんばんは！

私の問題はかなり単純です。私の div は画面を超えています。私はこのdivを持っています:

<div id="button">Button-text</div>

私のCSSは次のようになります：

#button {
    background-color: grey;
    text-align:center;
    padding:10px;
    margin:15px;
    width:100%;
}

box-sizing で解決できますが (ただし、古いブラウザーでは機能しません)、応答性が必要です。解決策はありますか？

また、jsfiddle をセットアップしました: http://jsfiddle.net/2k9Cd/

Answer 1

その場合、マージンとパディングに％を使用します。

#button {
    background-color: grey;
    text-align:center;
    padding:2%;
    margin:3%;
    width:90%;
}

これがjsfiddleです

注：幅（％）= 100％-[2 xマージン（％）]-[2 xパディング（％）]。この場合、それは90％= 100％-2x3％-2x2％です

Answer 2

CSS

#button {
    background-color: grey;
    text-align:center;
    padding:10px;
    margin:15px;
}
#container {
    background-color: black;
    width:100%;
}

HTML

<div id="container">
    <div id="button">Button-text</div>
</div>

フィドル

Answer 3

margin:15px auto; padding:10px; width:95%; width:calc(100%-20px);

これは幅を取り、パディングのためにそれを減らします。