css - 带有列填充的 CSS 列表

Question

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

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

标签： csslist

Answer 1

尝试使用 column-gap 属性：

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

您可以在此处了解有关 column-gap 属性的更多信息。