0

我正在尝试制作一个如下所示的菜单：

例子

但由于某种原因，我的菜单如下所示：

问题

如您所见，我试图将第二行菜单选项保留在一行中，但无论我尝试做什么，它似乎都没有做到这一点。

这是我的代码：

HTML

<div id="header">
    <div class="wrap">
        <div id="logo">
            <a href="index.html"><img src="img/header/seal.jpg" alt="" style="width:106px;height:67px;"></a>
        </div>
        <div id="nav_box">
            <ul id="mini_nav">
                <li><a href="#">Voorwaarden</a></li>
                <li><a href="#">Privacy</a></li>
            </ul>
            <ul id="nav">
                <li><a href="#">Contact</a></li>
                <li><a href="#">Olivetti</a></li>
                <li><a href="#">Producten</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

html,body {
    height:100%;
    width:100%;
}

.wrap {
    margin: 0 auto;
    width: 1024px;
}

/* - 2.5 - MENU
------------------------------------------ */

#logo {
    margin-left:45px;
    margin-top:18px;
    float:left;
}

#header {
    top:0; left:0;
    width:100%; height:112px;
    position:absolute;
    z-index:100;
}

#nav_box {
    float:right;
    margin-right:50px;
    margin-top:25px;
}

#mini_nav li {
    font-family:'Myriad Pro';
    float:right;
    text-transform:uppercase;
    color: #bbbbbb;
    font-size: 14px;
    margin-left:22px;
}

#mini_nav li a{
    font-family:'Myriad Pro';
    color: #bbbbbb;
    font-size: 14px;
}

#nav li {
    font-family:'Oxygen';
    float:right;
    text-transform:uppercase;
    font-weight:bold;
    color: #bbbbbb;
    font-size: 17px;
    margin-left:22px;
    margin-top:20px;
}

#nav li a{
    font-family:'Oxygen';
    color: #bbbbbb;
    font-size: 17px;
}

我有点迷茫如何解决，也许你们可以帮助我解决这个问题？我尝试过使用 position 属性和 float 属性，但它似乎不起作用。我可能正在认真考虑这一点。

4

3 回答 3

1

尝试申请：

.mini_nav {
    overflow: hidden;
}

或者

.mini_nav:after {
   content: ".";
   height: 0;
   visibility: none;
   display: block;
   clear: both;
}
于 2013-11-01T11:24:37.213 回答
0

我倾向于避免使用float此任务，display: inline-block;而是使用：

#mini_nav li {
    font-family:'Myriad Pro';
    display: inline-block;
    text-transform:uppercase;
    color: #bbbbbb;
    font-size: 14px;
    margin-left:22px;
}

当您使用时，float您会将元素从文档流中取出，并且可能会遇到各种布局问题。使用display: inline-block将元素保留在文档流中。

这是一个带有此更改的 HTML 和 CSS 的模型。

于 2013-11-01T11:23:49.270 回答
0

您需要清除两者之间的 div 。那就是你需要在两者之间添加

<ul>....First list....</ul>

<div class="clear"></div>

<ul>....second list....</ul>

“clear”类将具有以下css

.clear {
  clear:both
}

这是一个演示

于 2013-11-01T11:32:10.870 回答