为什么第二个div下滑？

Question

我有下一个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，以防万一。 谢谢！

Answer 1

由于vertical-align的默认值（适用于内联级和表格单元格）为baseline，因此您需要使用vertical-align: top。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;