다른 CSS 항목이 줄에 없음

Question

나는 h1 a 요소와 같은 줄에 넣으려는 요소가 많은 li a 개가 있습니다.

제 문제는 h1이 맨 위에 정렬되고 나머지는 기준선에 정렬된다는 것입니다.

h1

는
ul li a는 인라인 표시를 도시
ul li는 디스플레이리스트 항목을 도시
ul는 디스플레이 블록을 도시
h1 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