单击“问题”上的CSS3列布局

Question

我有这个小提琴，它工作得很好，但是当我单击每个列中的最后一个li时，它似乎会向下推段。我不明白为什么..。

.columns-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
column-count: 3;
}

.column-layout {
list-style-type: none;
margin: .9rem 0 0 0;
}

Answer 1

这似乎是铬的一个问题，如果您检查链接并将状态更改为:focus，则链接将收到一个蓝色框outline: -webkit-focus-ring-color auto 5px;，它基本上会推开<p>。

若要绕过此操作，请添加以下内容：

a:focus{
    outline: none;
}

Answer 2

希洛·亚历克斯

rashid/5 5yjsjnjj/4/

CSS UPdated

.columns-3 {
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
column-count: 3;
    display:table;
}

.column-layout {
list-style-type: none;
    display:table-cell;
margin: .9rem 0 0 0;
}

这里是小提琴，我已经更新了，您只需添加显示属性到您的列表中，那么下面一段就不会跳了。