带有列填充的CSS列表

Question

我创建了一个包含三列的无序列表。当进行响应和缩小分辨率时，列会发生接触。我可以用什么在它们之间填充？

.li-3col {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}

Answer 1

尝试使用列间隙属性：

.li-3col {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}

您可以在此处了解有关列间隙属性的更多信息。