对内联块无序列表进行居中导致第二个列表被强制置于底部

Question

我试图将两个无序列表集中在div中。要做到这一点，我正在使用这个基本策略，其中的关键是为父div提供text-align: center属性，然后让孩子ul s inline-block s：< / p>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

浮动似乎可以修复此特定问题，但似乎我必须对父div执行明确修复，以使其与子height的{​​{1}}匹配s，此外，我的两个ul不再很好地居中。

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

Answer 1

只需在vertical-align:top中设置.list，因为默认情况下元素集inline-block为vertical-align:baseline

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;