html - 添加边框以锚定悬停状态而不影响其余元素

Question

我想在导航中悬停的元素的左右两侧添加边框。这行得通，但看到我在元素中添加 2px，它会将其他元素推出。如何将边框添加到几乎位于悬停的列表项的内部而不影响导航的其余部分？

 // Simple example:
 li {
     list-style: none;
     display: inline;
 }

 li a:hover {
     border-left: 1px solid black;
     border-right: 1px solid black;
 }

 // HTML:
 <ul>
     <li><a href="">Test 1</a></li>
     <li><a href="">Test 2</a></li>
     <li><a href="">Test 2</a></li>
 </ul>

或访问jsfiddle link一个活跃的例子。

Answer 1

我会为您的 a 标签添加一个透明边框:

li a {
    border: 1px transparent solid;
    border-width: 0 1px;
}

http://jsfiddle.net/dfsq/95ZUw/1/