html - 单击具有 CSS 列的列表中的按钮会更改列

Question

我在一个列表中有一堆按钮，其中定义了 CSS 列。该列表最初显示良好，但当我单击列表底部的按钮时，它会移动到下一列的顶部，并在其位置留下一个洞。在新位置再次单击时，它会移回自己的位置。

类定义如下:

.Col5 {
    columns: 5;
    -webkit-columns: 5;
    -moz-columns: 5;
}

Answer 1

您可以通过取消按钮上的轮廓来解决问题。

button{
    outline: none;
}

更新:实际上，问题似乎是因为对于 button:focus，浏览器(至少 Webkit)似乎添加了如下 CSS:

button:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

因此，只需像以下方法之一一样重置该行为就可以解决问题。

button:focus {
    outline: -webkit-focus-ring-color auto 0px;
}

/* OR */

button:focus {
    outline: none;
}

Updated Demo