html - 单击CSS列的列表中的按钮在单击时会更改列

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

该类的定义如下：

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

最佳答案

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

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

关于html - 单击CSS列的列表中的按钮在单击时会更改列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24701316/