内容溢出内容区域

Question

我有demo。 为什么列表项溢出白色内容区域以及如何解决？

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;
}