html - 为什么第二个 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(适用于inline-level和table-cell元素)的默认值是baseline，所以需要使用vertical-align : 顶部。

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