Question

我有一个div，我想成为页面的99％，并让文本从框的边缘开始1em。以下是我的编码。一旦我添加1em填充，它将div拉伸到比页面更宽。我不想使用固定宽度，因为我试图在各种分辨率的手机和平板电脑上使其看起来很好。

如何让包装盒中的所有文字从边缘开始，盒子大小不会改变？

#contents {
    float: left;
    width: 99%;
    border-radius: 1em;
    margin: .5% .5% .25% .5%;
    padding-left: 1em;
    background-color: #B7ECFF;
}

Answer 1

使用包装器来包含您的主要内容，例如：

HTML：

<div id="wrapper">
    <div id="contents">
        some text
    </div>
</div>

CSS：

#wrapper {
    float: left;
    width: 99%;
    border-radius: 1em;
    margin: .5% .5% .25% .5%;
    background-color: #B7ECFF;
}
#contents { padding-left: 1em; }

http://jsfiddle.net/F9Gn9/2/

Answer 2

使用百分比作为填充，并根据用于填充的百分比更改页面的宽度。例如：

#contents {
    float: left;
    width: 98%;
    border-radius: 1em;
    margin: .5% .5% .25% .5%;
    padding-left: 1%;
    background-color: #B7ECFF;
}

Answer 3

我删除了padding-left表单div#contents，这是您要查找的内容吗？

http://jsfiddle.net/HS23V/1/

Answer 4

如果我理解你的问题，box-sizing: border-box可能就是你想要的：

http://jsfiddle.net/SbkzB/

填充延伸div

4 个答案: