保持列表菜單上一行

我試圖做一個看起來像這樣的菜單：保持列表菜單上一行

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

我有點失去了對如何應對，也許你們可以幫助我在這？我曾嘗試使用位置屬性和浮動屬性，但它似乎並沒有工作。我可能在想這個。

來源

2013-11-01 IDJosh

之間加給你的'＃nav_box'一個寬度，可以讓你的鏈接適合一個林e – Pete

嘗試應用：

.mini_nav { 
    overflow: hidden; 
}

或

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

來源

2013-11-01 11:24:37

你的第二個建議解決了這個問題，謝謝！ – IDJosh

我傾向於避免使用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。

來源

2013-11-01 11:23:49 Fenton

您需要在兩者之間清除DIV。這就是你需要在兩個