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);

这将占用宽度并减少填充。