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

因为它们都使用浮动，所以每当菜单项与标题项位于同一水平面上时，它们就会开始以错误的方式定位。

除了使用 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 在menuitem 之下。 您可以将其更改为 13% 或像素大小：

.menuitem {
    height: 25px;
    width: 13%; /* or width: 140px */
    float: left;
    color: #FFF;
}