我的页面上有许多 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;
}
最佳答案
您的 item
包含 sub-item
。问题是 item
的高度固定为 35px。 sub-item
的上边距为 40px。这意味着从 item 顶部到 sub-item
顶部的距离是 40 px -- 这比 item
本身的整个尺寸还大!
要解决此问题,请从 CSS 中的 .item
中删除 height: 35px
。参见 this updated JSFiddle .
关于html - css - Div 没有以正确的方式出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17027430/