Div clearfix删除空格

Question

我的网站有标题和菜单栏。 我想把它们水平贴在一起，就像这样：

---

        HEADER

---

         MENU

---

但是会发生什么：

---

        HEADER

---

        WHITE SPACE

---

         MENU

---

我标题的代码：

<div id="headersecure" class="clearfix">
   <div class="headeritem"><a href="#">Uitloggen</a></div>
   <div class="headeritem"><a href="#" onclick="loadX()">X</a></div>
   <div class="headeritem headerfoto"><a href="#" onclick="loadX(()">Test</a></div>
   <div class="headeritem"><a href="#" onclick="loadQ()">W</a></div>
   <div class="headeritem"><a href="#" onclick="loadQC()">Contact</a></div>
</div>

标题css代码：

#headersecure {
    padding-left: 10%;
    width: 90%;
    min-width: 1024px;
    height: 40px;
    z-index: 1;
    font-family: LANENAR;
}

.headeritem {
    height: 100%;
    padding-right: 30px;
    float: right;
    padding-top: 10px;
    color: #FFF;
}

我的菜单栏的代码：

<div id="headermenu" class="clearfix">
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadA()"><img src="images/a.png">A</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadB()"><img src="images/b.png">B</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadC()"><img src="images/c.png">C</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadD()"><img src="images/d.png">D</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadE()"><img src="images/e.png">E</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadF()"><img src="images/f.png">F</a></div>
   <div class="menuitem"><a href="#" onmouseover="" onclick="loadG()"><img src="images/g.png">Test12313131311</a></div>
 </div>

菜单的css代码：

#headermenu {
    padding-left: 10%;
    width: 90%;
    min-width: 1024px;
    top: 40px;
    height: 25px;
    font-family: LANENAR;
}

.menuitem {
    height: 25px;
    width: 8%;
    float: left;
    color: #FFF;
}

clearfix css代码：

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

因为它们都使用浮动，所以每当menubaritems与headeritems处于同一水平面时，它们就会开始以错误的方式定位。

我没有使用class：clearfix，而是尝试在它们之间放置一个div，如下所示：

<div style="clear:both;"> </div>

我的问题是，两个解决方案都会在菜单和标题之间创建一个空白区域。 我也尝试将所有边距，填充等设置为0，但这没有帮助。

//编辑：摆弄div风格清除：http://jsfiddle.net/XJ3QE/3/ 截图：

//编辑：Chrome 28中的屏幕截图

Answer 1

如果您的问题只是标题和菜单之间的可用空间，那是因为height of h.headeritem。它被移除，如This Link。

删除height: 100%;，.headeritem就像这样：

.headeritem {
    height: 100%;
    padding-right: 30px;
    float: right;
    padding-top: 10px;
    color: #FFF;
}

编辑部分： 从屏幕截图中可以清楚地看出，Test12313131311低于headermenu，这是因为width的{​​{1}}。 您可以将其更改为13％或像素大小：

menuitem