0

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

如何使框中的所有文本从边缘开始并且框大小不改变？

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

4 回答 4

1

如果我正确理解您的问题，box-sizing: border-box可能就是您正在寻找的内容：

http://jsfiddle.net/SbkzB/

于 2013-07-12T22:14:04.717 回答
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/

于 2013-07-12T19:38:21.987 回答
0

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

#contents {
    float: left;
    width: 98%;
    border-radius: 1em;
    margin: .5% .5% .25% .5%;
    padding-left: 1%;
    background-color: #B7ECFF;
}
于 2013-07-12T19:17:47.300 回答
0

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

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

于 2013-07-12T19:39:15.020 回答