두 번째 div가 슬라이드 다운되는 이유는 무엇입니까?

Question

내가있어 다음 HTML/CSS 코드는 : 내가 처음 사업부 내부의 UL 요소를 넣을 때

.first, 
 
.second { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid #333; 
 
    text-align: center; 
 
    display: inline-block 
 
} 
 

 
.first > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="first"><h1>first div</h1><ul><li>text</li></ul></div> 
 
<div class="second"><h1>second div</h1></div>

왜 두 번째 DIV 슬라이드를 아래로?

JS Bin link 감사합니다.

Answer 1

기본값 인 vertical-align (인라인 수준 및 표 셀 요소에 적용)은 baseline이므로 vertical-align: top을 사용해야합니다.

.first, 
 
.second { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid #333; 
 
    text-align: center; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.first > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="first"> 
 
    <h1>first div</h1> 
 
    <ul> 
 
    <li>text</li> 
 
    </ul> 
 
</div> 
 
<div class="second"> 
 
    <h1>second div</h1> 
 
</div>