HTML – 为什么第二个div滑落？

我有下一个html / css代码：

.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>

当我把ul元素放在第一个div中时,为什么第二个div会滑落？

JS Bin link,以防万一.
谢谢！

解决方法

因为vertical-align的默认值(适用于内联级和表格单元格)是基线,所以需要使用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>