Question

<div id="linksbwrap">
<a class="linkb" href="">Lorem ipsum Lorem ipsum</a><br>
<a class="linkb" href="">Lorem ipsum Lorem</a><br>
<a class="linkb" href="">Lorem ipsum Lorem ipsum</a><br>
<a class="linkb" href="">Lorem ipsum Lorem</a><br>
...
</div>

CSS

#linksbwrap{
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

如何将第一列的左边距设置为与最后一列的右边距相同？

并保持列内的链接左对齐。

我试过了：

 #linksbwrap{
        text-align:center;
    }

但在这种情况下，列内的链接也是自身居中的。

Answer 1

尝试修正宽度并将其保持在中心位置。这样它会给你左右边距的结果是一样的。

#linksbwrap{
 -webkit-column-count: 4;
 -moz-column-count: 4;
 column-count: 4;
 margin:0px auto;
 width:80%;
}

DEMO

Answer 2

赢得了这项工作吗？

＆＃13;

{{lesson}}Ctrl

＆＃13;

#linksbwrap {
  display: inline-block;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  background:lightblue;
  margin: 0 40px;
  padding-left: 30px;
}

＆＃13;

Answer 3

我建议使用online css generators，如：

CSS3Generator.com

您可以尝试不同的属性，找到最适合您的问题。

Answer 4

将此添加到您的CSS

#linksbwrap {
        display: flex;
        justify-content: space-around;
    }

这将在第一个元素的左侧和最后一个元素的右侧留下相等的空间

如何集中列组

4 个答案: