Question

Goodevening！

我的问题很简单，我的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>

fiddle

Answer 3

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

这将取宽度并减少填充。

Div超越了屏幕

3 个答案: