導航菜單與css對齊

Question

我想根據在Skype網站上找到的導航菜單，但更簡單的版本。

所以菜單由3個項目組成。

1. 標誌
2. 導航菜單頂行（2項，語言和特殊按鈕）
3. 導航菜單下排（5項）

目標：
我的最終目的是爲了獲得上面兩排對齊到右側（我已經管理）和左側的徽標。此外，徽標必須與導航菜單的底行對齊。

看到的景象： http://i39.tinypic.com/2qa2zys.png

的HTML代碼：

<nav> 
     <ul> 
     <li> 
      <img src="images/lang.png" alt="Language" /></a> 
     </li> 
     <li> 
     <a href="#" class="lang">NEDERLANDS</a> 
     </li> 
     <li> 
      <a href="#" class="special">SPECIAL</a> 
     </li> 
    </ul> 
     <a href="#"> <img src="images/logo.png" alt="Logo" class="logo"/></a> 
     <ul> 

     <li> 
      <a href="#" class="selected">HOME</a> 
     </li> 
     <li> 
      <a href="#" >HOE WERKT HET?</a> 
     </li> 
     <li> 
      <a href="#">HELP</a> 
     </li> 
     <li> 
      <a href="#">PRIJZEN & AANMELDEN</a> 
     </li> 
     <li> 
      <a href="#">INLOGGEN</a> 
     </li> 
    </ul> 
    </nav> 

的CSS：

body { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
    background: #f2f2f2; 
    font-family: Droid Sans ,Arial,'Liberation Sans',FreeSans,sans-serif; 
    line-height: 14px; 
    display:block; } 


header nav li { 
float:left; 
margin-right:50px; 
list-style: none; 
text-decoration: none; 
vertical-align: text-bottom; 
} 


header nav a { 
font-weight: bold; 
font-family: PT Sans; 
text-decoration: none; 
font-size: 14px; 
color: #333333; 
text-shadow: white 1px 1px 1px; 
} 

header nav a:hover, a:active { 
color: #0065f5; 
} 
header nav .selected { 
text-decoration:underline; 
} 

header nav ul { 
float: right; 
margin-top:10px; 
margin-bottom:10px; 
} 

.special { 
text-decoration:none; 
color: white; 
background: #0065f5; 
padding:5px 15px; 
text-shadow: #333333 1px 1px 1px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
} 

.special:hover { 
color: #fed000; 
} 

.logo { 
float:left; 
margin-top: 30px; 
} 

Answer 1

你可以左浮動標識並給予margin-top用等量的像素作爲語言菜單的高度。 或使用position: absolute。

但是究竟是什麼不是 achive？ jsFiddle看起來不錯，但也許圖像（缺少）定位不好。