Question

我正在尝试制作一个看起来像这样的菜单：

Example

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

problem

正如你所看到的，我试图将第二行菜单选项保留在一行中，但无论我尝试做什么，似乎都没有这样做。

这是我的代码：

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;
}

Answer 2

我倾向于避免使用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可以保留文档流中的元素。

Here is a mock-up of your HTML and CSS with this change

Answer 3

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

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

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

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

“clear”类将有以下css

.clear {
  clear:both
}

here is a demo

将列表菜单保持在一行

3 个答案: