html - 如何安排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 一点，它会与 logo 几乎处于同一水平。如果需要，可以有一个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