css masonry无序列表项

Question

我有一个大的无序列表，需要显示在2列中。 我试图用漂浮物制作它但由于物品的高度不同而我松散到变异空间

然后我尝试了pure css masonry layout

HTML

ul {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;

    column-count: 2;
    column-gap: 1%;
    column-width: 50%;
}

li {
    margin-bottom: 1%;
    background:#BFBFBF;
}

CSS

{{1}}

问题是在Google Chrome中我没有看到第二列上的子弹

在firefox中列显示正确

firefox

chrome

问题是什么？

Answer 1

只需在列表中添加一个边距即可看到子弹：

li {
    margin-bottom: 1%;
    background:#BFBFBF;
    margin-left: 10px;
}

Answer 2

在li课程中添加 margin-left：20px; 。它可以在两种浏览器中使用。请这样做并确认一样。