如何排列div inline？

Question

HTML：

<div id="header"> 
    <div id="logo" class="block"><h1>Logo place</h1></div> 
    <div id="navigation" class="block"> 
     <ul> 
      <li><a href="index.html" class="current"><span class="meta">Homepage</span><br />Home</a></li> 
      <li><a href="about.html"><span class="meta">Who are we?</span><br />About</a></li> 
      <li><a href="contact.html"><span class="meta">Get in touch</span><br />Contact Us</a></li> 
     </ul> 
    </div> 
</div> 

CSS：

#header .block{ 
    padding: 5px; 
    display: inline-block; 
    vertical-align: top; 
} 

#header #logo{ 
    float: left; 
    vertical-align: middle; 
} 

#header #navigation{ 
    float: right; 
    vertical-align: top; 
} 

#navigation li{ 
    display: inline-block; 
} 
#navigation li a { 
    font-family:arial,sans-serif !important; 
    display:block; 
    padding:44px 0 0; 
    text-decoration:none; 
    color:#000000; 
    font-size:14px; 
    font-weight:bold; 
} 

http://jsfiddle.net/nonamez/gGrrm/

所以，我需要拿起div的一點，那這將是幾乎在同一水平上與標誌。如果需要，可以有一個height。可能有人能爲我的問題提供一些線索嗎？

Answer 1

的原因，您的菜單不上邊是因爲

#navigation li a 

具有填充：

padding:44px 0 0; 

所以通過改變該行正常安排吧：

padding:0; 

Answer 2

爲什麼不使用位置：相對;底部：20px;

像這樣的東西不管是什麼結果，你正在尋找...

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_relative