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, они начинают позиционировать неправильный путь.

Вместо того чтобы использовать класс: clearfix, я также попытался положить DIV между ними, как это:

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

Моя проблема в том, что оба решения создают пустое пространство между меню и заголовком. Я также попытался установить все поля, отступы и т. Д. До 0, но это не помогает.

// редактировать: скрипка с ДИВЫМ стилем ясного как: 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; 
} 

Edit Part: Как видно из скриншота, Test12313131311 ниже из headermenu, это из-за width из menuitem. Вы можете изменить его на 13% или размер пикселя:

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