javascript - 突出显示背景窗格大于没有填充的链接对象的链接

Question

http://jsbin.com/OkaC/1/编辑

HTML：

<ul>
    <li>
      <a class='active' href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
</ul>

CSS：

.active {
    background:grey;
    border-radius:2px;
    padding:4px;
}

这是我试图实现的基本示例 - 突出显示效果大于链接元素本身的普通链接。在这里我使用填充，但它破坏了页面视觉结构的一致性 - 突出显示的链接相对于常规链接移动。
我想到的可能的解决方案：

• 为所有链接添加填充。
• 使用 JS，将活动链接切换到当前坐标的绝对定位。

还有其他解决方案吗？

Answer 1

您还可以添加负边距以删除链接周围的额外空间：

a {
    padding: 4px;
    margin: -4px;
}

其他方法是添加轮廓而不是填充：

a {
    outline: 4px solid grey;
}

Answer 2

向这个特定的“ul li a”添加填充，而不是所有元素，这不应该改变页面的其余部分。