html - 将列表菜单保持在一行

Question

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

但出于某种原因，我的菜单看起来像这样:

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

这是我的代码:

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 属性，但它似乎不起作用。我可能正在认真考虑这一点。

Answer 1

尝试应用:

.mini_nav {
    overflow: hidden;
}

或

.mini_nav:after {
   content: ".";
   height: 0;
   visibility: none;
   display: block;
   clear: both;
}