第一列的列数未对齐

如何解决第一列的列数未对齐

在下面，我想配置用于显示列表的列数。我注意到第一列与其他列不一致。这正常吗？我想念的是什么？

请注意，我无法直接修改min-height: 100vh; min-height: -webkit-fill-available;的样式。它必须在外部元素上。

ul

解决方法

尝试从无序列表中删除默认边距

<ul style="margin: 0">

如果您无法编辑ul，则可以添加额外的元素以取消页边距

.box {
  column-count: 4;
}
.box:before {
  content:"";
  display:block;
  margin-top:-1em;
}

<div class="box" >
  <ul>
    <li>Gods</li>
    <li>Óðinn</li>
    <li>Baldur</li>
    <li>Njörður</li>
    <li>Freyr</li>
    <li>Týr</li>
    <li>Bragi</li>
    <li>Heimdal</li>
    <li>Thor</li>
    <li>Höðr</li>
    <li>Víðar</li>
    <li>Áli or Váli</li>
    <li>Ullr</li>
    <li>Forseti</li>
    <li>Óðinn</li>
    <li>Þór</li>
  </ul>
</div>