html - 居中行内 block 无序列表导致第二个列表被迫底部

Question

我试图将两个无序列表置于 div 的中心。为此，我使用了这个基本策略，其关键是给父级 div 一个 text-align: center 属性，然后让子级 ul s 内联 block s:

.area {
  text-align: center;
  border: 2px dashed red;
  border-radius: 5px;
  padding: 20px;
  width: 75px;
}
.list {
  list-style-type: none;
  padding: 0;
  display: inline-block
}
.list li {
  border: 1px solid pink;
  margin-bottom: 3px;
  padding: 5px;
}

<div class="area">
  <ul class="list">
    <li>sup</li>
    <li>sup</li>
    <li>sup</li>
    <li>sup</li>
    <li>sup</li>
  </ul>
  <ul class="list">
    <li>hi</li>
    <li>hi</li>
  </ul>
</div>

但是，第二个 ul 中的两个列表项位于底部而不是从顶部开始。

float 似乎解决了这个特殊问题，但似乎我必须对父级 div 做一个清晰的修复，以使其匹配 height子 ul 以及我的两个 ul 不再很好地居中。

有没有办法让第二个 ul 与第一个一致？

Answer 1

只需在 .list 中设置 vertical-align:top 因为元素集 inline-block 默认是 vertical-align :基线

.area {
  text-align: center;
  border: 2px dashed red;
  border-radius: 5px;
  padding: 20px;
  width: 75px;
}
.list {
  list-style-type: none;
  padding: 0;
  display: inline-block;
  vertical-align: top
}
.list li {
  border: 1px solid pink;
  margin-bottom: 3px;
  padding: 5px;
}

<div class="area">
  <ul class="list">
    <li>sup</li>
    <li>sup</li>
    <li>sup</li>
    <li>sup</li>
    <li>sup</li>
  </ul>
  <ul class="list">
    <li>hi</li>
    <li>hi</li>
  </ul>
</div>