html - 内容溢出内容区域

Question

我有一个演示。为什么列表项会溢出白色内容区域，我该如何解决？

body {
    line-height: 1;
    background:#7D93BD;
    font-size: 22px;
}
#content {
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    padding: 10px 20px 30px 20px;
    background-color:#F8F8F8;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
}
    #profileInfo {
    position: relative;
    top: 100px;
}
#profileInfo li {
    list-style-type: none;
    line-height: 1.4;
}
#profile_info_title {
    font-weight: bold;
}

Answer 1

您需要从 #profileInfo ul 中删除 top:100px - 它会将内容向下推 100px。

Answer 2

http://jsfiddle.net/AhSzg/2/

position:relative从中删除#profileInfo

仅postion在您需要它以与默认方式不同的方式时使用。或删除top:100px

Answer 3

如果你需要#profileInfo被下推 100px，那么使用margin-top代替top：

#profileInfo {
    margin-top: 100px;
    position: relative;
}