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 回答