0

私のウェブサイトにはヘッダーとメニューバーがあります。次のように、それらを互いに水平に貼り付けて配置したいと思います。

        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 のスクリーンショット http://s11.postimg.org/pyk7jajgz/image.png

4

1 に答える 1

0

問題がヘッダーとメニューの間の空きスペースだけである場合は、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;
}
于 2013-08-07T11:13:05.647 に答える