如何安排div内联？

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

为什么不使用position：relative;底部：20px;

对于你正在寻找的任何结果，这样的东西......

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