如何修复大纲并不总是在顶部答案

【问题标题】：How can I fix the outline not always being on top如何修复大纲并不总是在顶部
【发布时间】：2015-01-20 09:49:07
【问题描述】：

目前，我正在尝试创建一组内联的 <a> 标签，看起来像按钮。这些按钮的样式总是在它们周围有一个边框，但我必须设置margin-left: -1px 以确保边框像表格一样“折叠”。

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

我正在尝试创建一个漂亮的分页控件。按钮布局如下：

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

有谁知道为什么会发生这种情况以及我该如何补救？

注意：我可以提供的代码数量有限，因为它是生产代码。我会尽量提供人们需要的尽可能多的信息。

【问题讨论】：

为什么不直接删除这个可耻的 margin-left 并删除左边框（最后一项除外）？这将解决大纲问题，您的 CSS 会更干净。作为旁注，请注意从语义上讲，分页应该使用 ol ，而不是 ul 。
您是否尝试过修改元素的 z-index (CSS)？它可能有助于将 HTML 元素放置在其他元素的“上方”。
@NathanWhite z-index: 1 和 position: relative a:focus
我觉得应该把答案分配给@Knack，基本上他先有想法
是的：“速度越快，责任越大” ;)

标签： html css

【解决方案1】：

这个问题可以通过 HTML 元素的z-index CSS 属性来解决。

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

感谢@FabrizioCalderan 的最终回答。

【讨论】：