不同的CSS項目不在行

Question

我有一個h1 a元素和許多li a元素，我想放在同一行。

我的問題是，h1是在頂部對齊，而其餘的是在基線對齊。

h1顯示的顯示塊，
h1 a示出了顯示在線，
ul顯示的顯示塊，
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