css - 填充拉伸(stretch)一个 div

Question

我有一个 div，我希望占页面的 99%，并让文本从距框边缘 1em 处开始。下面是我的编码。添加 1em 填充后，它会将 div 拉伸(stretch)到比页面更宽。我不想使用固定宽度，因为我试图让它在各种分辨率的手机和平板电脑上看起来不错。

如何让方框内的所有文字都从边缘开始，并且方框大小不变？

#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/