具有列数的第一列未对齐

Question

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

注意我不能直接修改ul的样式。它必须在外部元素上。

<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div style="-webkit-column-count: 4;-moz-column-count: 4; column-count: 4;">
        <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>
</body>

</html>

Answer 1

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

<ul style="margin: 0">

Answer 2

如果您无法编辑 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>

具有列数的第一列未对齐

Unaligned first columns with column-count

html

css

html-lists