html - css - Div 没有以正确的方式出现

Question

我的页面上有许多 div，但有两种类型。第一种是“主项”，第二种是“子项”。问题是子项与主项重叠。

这是一个 jsfiddle:http://jsfiddle.net/CcPyG/

更多权限这里是我的代码:

HTML

<div class="item">
    Item 1
    <div class="sub-item">  
        Sub Item 1
    </div>
</div>
<div class="item">
    Item 2
    <div class="sub-item">  
        Sub Item 2
    </div>
</div>
<div class="item">
    Item 3
    <div class="sub-item">  
        Sub Item 3
    </div>
</div>
<div class="item">
    Item 4
    <div class="sub-item">  
        Sub Item 4
    </div>
</div>
<div class="item">
    Item 5
    <div class="sub-item">  
         Sub Item 5
    </div>
</div>

CSS

.item {
    font-family: Menu;
    color: White;
    width: 250px;
    height: 35px;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;
    color:black;
}
.sub-item {
    margin-top: 40px;
}

Answer 1

您的 item 包含 sub-item。问题是 item 的高度固定为 35px。 sub-item 的上边距为 40px。这意味着从 item 顶部到 sub-item 顶部的距离是 40 px -- 这比 item 本身的整个尺寸还大!

要解决此问题，请从 CSS 中的 .item 中删除 height: 35px。参见 this updated JSFiddle .