如何修复轮廓并不总是在顶部

Question

目前，我正在尝试创建一组<a>标签，这些标签看起来像按钮。按钮的样式始终围绕着它们，但我必须设置margin-left: -1px以确保边框“崩溃”。喜欢桌子。

除了按钮:focus之外，一切都有效，因为我想在<a>周围添加一个轮廓。如下图所示，除了隐藏的右手边缘外，轮廓完美无缺。

我试图创建一个漂亮的样式分页控件。按钮布局如下：

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    ...
</ul>

有谁知道为什么会发生这种情况以及如何解决这个问题？

注意：我可以提供的代码数量限制为生产代码。我将尽力提供人们需要的特别信息。

Answer 1

使用HTML元素的z-index CSS属性可以解决此问题。

在这种特殊情况下，在z-index: 1上使用position: relative和a:focus会显示正确的内容。

感谢@FabrizioCalderan的最终答案。