html - 不同的 CSS 元素不在一条线上

Question

我有一个 h1 a 元素和许多 li a 元素，我想将它们放在同一行中。

我的问题是 h1 在顶部对齐，而其余的在基线对齐。

h1显示一个显示 block ，
h1 a 显示内联显示，
ul显示一个显示 block ，
ul li 显示一个显示列表项，
ul li a 显示内联显示。

http://jsfiddle.net/jz2ufv5a/

HTML:

<div id="header" class="clearfix">
    <div id="logo">
         <h1>
            <a href="#">Studio</a>
        </h1>
    </div>
    <div id="menu">
        <ul>
            <li><a href="#">Work</a></li>
            <li><a href="#">Play</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Shop</a></li>
        </ul>
    </div>
</div>

CSS:

#header {
    background-color: blue;
    margin: 60px 0 120px 0;
    font-family:'PT Mono';
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: #444;
}
#logo {
    background-color: #f32;
    float: left;
}
#logo h1 {
    font-size: inherit;
    margin: 0;
}
#logo a {
    color: inherit !important;
    font-size: inherit !important;
    text-decoration: none;
}
#menu {
    background-color: #f3f;
    float: right;
}
#menu li {
    list-style-type: none;
    float: left;
    margin-left: 10px;
}
#menu a {
    text-decoration: none;
}
#menu a:link, #menu a:visited {
    color:#444;
}
#menu a:hover, #menu a:focus, #menu a:active, #menu a.currentPage {
    color:#fed356;
}

Answer 1

它是应用于 ul 元素的默认 margin。使用某种 CSS 重置是一种很好的做法。我通常只设置 padding: 0; margin: 0; 在所有元素上全局。添加:

#menu ul {
  margin: 0;
}

FIDDLE