Question

好的，所以我有这个小提琴：http://jsfiddle.net/Rae9m/

正如您所看到的，顶部的菜单不希望像预期的那样坚持边缘顶部。这是我的HTML：

 <div class="container">
<div class="menu">
<div class="item">Page</div>
<div class="item">Page</div>
<div class="item">Page</div>
<div class="item">Page</div>
</div>
<h2>Blue Beat</h2>
<div class="desc">
<em style="color: #00F7FF">Blue Beat - Featuring Electric Blue Color</em>
</div>
</div>

CSS很大，所以我会把重点放在这里：

.menu {
width: 1000px;
}

.menu:last-child {
float: clear;
}

.item {
width: 250px;
height: 50px;
float: left;
background-color: #00F7FF;
transition: background-color 1s;
}

.item:hover {
transition: background-color 1s;
background-color: #fff;
}

为什么这不起作用的任何想法？我尝试了所有这些，margin-top: 0用于身体，菜单，容器div等等，仍然不起作用，这非常令人沮丧。

Answer 1

<h2>正在给你这个空间。默认h2

的CSS：

h2 {margin:0;}

<强> Updated JsFiddle

Answer 2

您没有正确清除.menu中的浮动广告。

如果你改变了

.menu:last-child {
    float: clear;
}

到

.menu:after {
    content: "";
    display: table;
    clear: both;
}

或类似的，您可以保留标题上的边距，而不会将它们从容器中溢出。 http://jsfiddle.net/Rae9m/6/

保证金顶部菜单不起作用

2 个答案: